CSS~~text-decoration

╰半夏微凉° 2022-05-08 08:34 161阅读 0赞

### text-decoration有5种形式， ###

（1）、*none*，默认什么都没有

（2）、*overline*，上划线

（3）、*underline*，下划线

（4）、*line-through*，中贯线

（5）、*blink*，闪烁文字（注：浏览器不支持了）

废话少说，直接上代码啦，

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>my-test</title>
    <style>
    	*{margin: 0;padding: 0;}
    	ul,li,ol{list-style: none;}
    	html,body{width: 100%;height: 100%;font-size: 22px;color: #333;font-weight: bold;}
    	.wrap{width: 100%;height: 100%;}
    	.div{margin-bottom: 20px;}
    	.div1{text-decoration: none;}
    	.div2{text-decoration: overline;}
    	.div3{text-decoration: line-through;}
    	.div4{text-decoration: underline;}
    	.div5{text-decoration: blink;}
    </style>
    </head>
    <body>
    <div class="wrap">
    	<div class="div div1">我是标题</div>
    	<div class="div div2">我是标题</div>
    	<div class="div div3">我是标题</div>
    	<div class="div div4">我是标题</div>
    	<div class="div div5">我是标题</div>
    </div>
    </body>
    </html>

### **效果如下图，** ###

![70][]

其实主要的还是中贯线 ***text-decoration：line-through；***

希望能帮助到各位大神哈~

[70]: /images/20220508/c3f5fa531e014ae7a41dafd12f9ea47d.png