text-decoration属性

 

　　规定添加到文本的修饰。

 

　　none：表示标准的文本，什么样式都没有

 

　　underline：表示文本的下划线

 

　　overline：表示文本上的一条线。

 

　　line-through：表示穿过文本上的一条线，一般表示删除线

 

　　blink：表示闪烁的文本。

 

　　例：

 

　　<divstyle="text-decoration:underline;">PHP中文网</div>

 

　　<divstyle="text-decoration:line-through;">PHP中文网</div>

 

　　<divstyle="text-decoration:overline;">PHP中文网</div>

 

　　效果图：

 

　　Image20.jpg

 

　　text-decoration定义的下划线不能改变颜色，也不能设置它的粗细。因此我们可以通过别的方法来实现下划线的自定义

 

　　下划线的自定义：

 

　　（1）border-bottom方法

 

　　使用border-bottom来实现文本下划线时，可以改变下划线的颜色，粗细以及样式

 

　　但需要注意当元素为块级元素时，下划线不仅仅是文本内容的长度，它会占满一行，这时就需要通过display：inline将块级元素转化为行级元素。这样的话文本的长度就和下划线的长度一样了

 

　　例：让下划线变成粉色2px粗

 

　　<h1style="display:inline;border-bottom:2pxsolidpink">PHP中文网</h1>

 

　　效果图：

 

　　Image21.jpg

 

　　（2）background-image方法

 

　　在background-image方法中通过使用线性渐变的方法来设置下划线，在这里仍然要记住当元素为块级元素时注意将其改变为行级元素

 

　　例：

 

　　h1{

 

　　display:inline;

 

　　background-image:linear-gradient(toright,pink60%,transparent10%);

 

　　background-position:0100%;

 

　　background-repeat:repeat-x;

 

　　background-size:8px3px;

 

　　padding-bottom:10px;

 

　　}






本文转载自中文网