什麼是HTML文本裝飾？

我們希望為下劃線、上劃線和橫劃線使用自定義樣式。這時候怎麼辦呢?下面我們給大家介紹一下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文本裝飾的方法了。希望大家繼續關注我們的網站!