資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 更新 - 文字裝飾和下劃線的新樣式屬性
透過引入以下文字裝飾屬性，我們現在可以比以前更多的方式來設定文字樣式。text-decoration 是 text-decoration-thickness、text-decoration-color、text-decoration-line 和 text-decoration-style 的簡寫。text-decoration-skip、text-decoration-skip-ink、text-decoration、text-underline-offset 和 text-underline-position 需要顯式指定。
語法
CSS 文字裝飾的語法如下所示：
Selector {
text-decoration: /*value*/
}
text-decoration 簡寫屬性
text-decoration 是 text-decoration-thickness、text-decoration-color、text-decoration-line 和 text-decoration-style 的簡寫。text-decoration-skip、text-decoration-skip-ink 等。
示例
讓我們看一個使用簡寫屬性裝飾文字的示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration: dotted underline purple 3px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
帶文字上劃線和下劃線的文字裝飾
我們可以使用以下屬性在文字上設定下劃線和上劃線：
text-decoration-line: underline overline;
上面，我們設定了 underline 和 overline 值。
示例
讓我們看一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
使用 skip ink 控制行為的文字裝飾
text-decoration-skip-ink 屬性用於控制下劃線和上劃線的行為。其值可以是以下值：
auto - 在經過字元時跳過下劃線/上劃線。預設值。
none - 下劃線和上劃線在文字內容的整個長度上繪製，包括穿過字形下降和上升部分的部分。
示例
以下示例說明了 CSS text-decoration 屬性：
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html>
更新於: 2023年10月31日
115 次檢視
廣告