我们希望为下划线、上划线和横划线使用自定义样式。这时候怎么办呢?下面我们给大家介绍一下HTML文本装饰的方法吧!

解决方案

可以使用text-decoration在文本下方、上方或者通过正文放置一条线。线的颜色是文本的颜色，并且浏览器决定它的厚度。

也可以使用border属性来创建下划线或上划线。

n    使用border控制线的厚度、样式和颜色。

也可以使用background-image属性创建无数种下划线、上划线和横划线。通过平铺图像，可以创建任何厚度、多种颜色的样式。

n    使用background-image为文本装饰指定图像。

n    使用background-position为文本装饰指定位置。

n    使用background-repeat:repeat-x水平方向平铺图像。

n    使用padding-top或padding-bottom在文本装饰和文本之间插入竖直空格。

模式

文本装饰

INLINE-SELECTOR { text-decoration:underline; }

INLINE-SELECTOR { text-decoration:overline; }

INLINE-SELECTOR { text-decoration:line-through; }

边框下划线

INLINE-SELECTOR { border-bottom:WIDTH STYLE COLOR; }

边框上划线

INLINE-SELECTOR { border-top:WIDTH STYLE COLOR; }

背景下划线

INLINE-SELECTOR { background-repeat:repeat-x;

background-position:left bottom;

background-image:url("FILE.EXT");

padding-bottom:+VALUE; }

背景上划线

INLINE-SELECTOR { background-repeat:repeat-x;

background-position:left top;

background-image:url("FILE.EXT");

padding-top:+VALUE; }

背景横划线

INLINE-SELECTOR { background-repeat:repeat-x;

background-position:left center;

background-image:url("FILE.EXT");

padding-bottom:+VALUE; }

适用范围

此模式适用于内联元素。

提示

透明的可交换图像文件作为背景图像能很好地与不同的背景色结合。

以上就是我们给大家介绍的HTML文本装饰的方法了。希望大家继续关注我们的网站!