TOC

This article is currently in the process of being translated into Chinese (~24% done).

Text:

Text Decoration

text-decoration 這個屬性其實滿一目了然的:它允許你用多種方式裝飾文字。它最常被用於文字的底線。

<div style="text-decoration: underline;">Hello, world!</div>

然而,它其實還有其他許多的可能性。例如,你可以在文字上建立刪除線的效果:

<div style="text-decoration: line-through;">Hello, world!</div>

現在,最酷的事情是,text-decoration 屬性允許你一次使用許多值。

<div style="text-decoration: overline underline;">Hello, world!</div>

Try it out

As the final example, allow me to show you all the possible values in the same example, with a bonus line using all of them simultaneously:

<style type="text/css">
div {
	margin: 30px 0;
}
</style>

<div style="text-decoration: overline;">Hello, world!</div>

<div style="text-decoration: line-through;">Hello, world!</div>

<div style="text-decoration: underline;">Hello, world!</div>

<div style="text-decoration: underline overline line-through;">Hello, world!</div>

結論

text-decoration 屬性讓你更容易為你的文字加上線,但要記得的是它不是邊框─用此屬性建立在文字周圍的線,其顏色將會跟文字一樣。如果你需要一條跟文字不同顏色的線,那你應該要用 border 屬性。

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!