CSS3中的text實現了許多讓文字更加美觀的特性,其中線條是常用的一種。
/*在CSS3中,我們可以使用以下屬性來控制文字的線條*/ text-decoration: underline; /*下劃線*/ text-decoration: overline; /*上劃線*/ text-decoration: line-through; /*中劃線*/ text-decoration: blink; /*閃爍線*/ /*還可以使用以下屬性來控制線條的顏色、寬度等*/ text-decoration-color: red; /*線條顏色*/ text-decoration-style: solid; /*線條樣式(實線/虛線等)*/ text-decoration-thickness: 2px; /*線條寬度*/
通過上述屬性的組合,我們可以實現各種不同樣式的線條效果。
例如,下面這個例子將一段文字添加紅色虛線下劃線:
p { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: red; }
除了對單獨的文字進行線條處理,我們還可以利用偽類,比如:hover、:focus等來實現鼠標懸停時、獲取焦點時的線條效果。例如:
a:hover { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: blue; }
最后,需要注意的是,text-decoration屬性可以同時存在多個值,以空格隔開,這些值將會應用在同一個文字上。例如:
p { text-decoration: underline dotted red; }
上述代碼將一段文字同時添加紅色虛線下劃線和黑色實線下劃線。
下一篇css3 搜索框