?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
text-decoration-style:solid | double | dotted | dashed | wavy
默認值:solid
適用于:所有元素
繼承性:無
動畫性:否
計算值:指定的值
solid:實線
double:雙線
dotted:點狀線條
dashed:虛線
wavy:波浪線
對應(yīng)的腳本特性為textDecorationStyle。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-style_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li{ margin-top:10px; -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(1){ -webkit-text-decoration-style:solid; -moz-text-decoration-style:solid; text-decoration-style:solid; } .test li:nth-child(2){ -webkit-text-decoration-style:double; -moz-text-decoration-style:double; text-decoration-style:double; } .test li:nth-child(3){ -webkit-text-decoration-style:dotted; -moz-text-decoration-style:dotted; text-decoration-style:dotted; } .test li:nth-child(4){ -webkit-text-decoration-style:dashed; -moz-text-decoration-style:dashed; text-decoration-style:dashed; } .test li:nth-child(5){ -webkit-text-decoration-style:wavy; -moz-text-decoration-style:wavy; text-decoration-style:wavy; } </style> </head> <body> <ul class="test"> <li>文本裝飾實線</li> <li>文本裝飾雙線</li> <li>文本裝飾密虛線</li> <li>文本裝飾疏虛線</li> <li>文本裝飾波浪線</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-style_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li{ margin-top:10px; -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(1){ -webkit-text-decoration-style:solid; -moz-text-decoration-style:solid; text-decoration-style:solid; } .test li:nth-child(2){ -webkit-text-decoration-style:double; -moz-text-decoration-style:double; text-decoration-style:double; } .test li:nth-child(3){ -webkit-text-decoration-style:dotted; -moz-text-decoration-style:dotted; text-decoration-style:dotted; } .test li:nth-child(4){ -webkit-text-decoration-style:dashed; -moz-text-decoration-style:dashed; text-decoration-style:dashed; } .test li:nth-child(5){ -webkit-text-decoration-style:wavy; -moz-text-decoration-style:wavy; text-decoration-style:wavy; } </style> </head> <body> <ul class="test"> <li>文本裝飾實線</li> <li>文本裝飾雙線</li> <li>文本裝飾密虛線</li> <li>文本裝飾疏虛線</li> <li>文本裝飾波浪線</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-style_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test li{ margin-top:10px; -webkit-text-decoration-line:underline; -moz-text-decoration-line:underline; text-decoration-line:underline; } .test li:nth-child(1){ -webkit-text-decoration-style:solid; -moz-text-decoration-style:solid; text-decoration-style:solid; } .test li:nth-child(2){ -webkit-text-decoration-style:double; -moz-text-decoration-style:double; text-decoration-style:double; } .test li:nth-child(3){ -webkit-text-decoration-style:dotted; -moz-text-decoration-style:dotted; text-decoration-style:dotted; } .test li:nth-child(4){ -webkit-text-decoration-style:dashed; -moz-text-decoration-style:dashed; text-decoration-style:dashed; } .test li:nth-child(5){ -webkit-text-decoration-style:wavy; -moz-text-decoration-style:wavy; text-decoration-style:wavy; } </style> </head> <body> <ul class="test"> <li>文本裝飾實線</li> <li>文本裝飾雙線</li> <li>文本裝飾密虛線</li> <li>文本裝飾疏虛線</li> <li>文本裝飾波浪線</li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例