CSS设置文字的划线

最新推荐文章于 2024-07-12 14:10:49 发布

量变决定质变

最新推荐文章于 2024-07-12 14:10:49 发布

阅读量8k

点赞数 2

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52027806

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置文字的划线

文字加上下划线、顶划线和删除线，在文档中是经常使用的。

CSS中通过设置文字的text-decoration属性，来实现这些特殊的效果。

<span style="font-size:24px;"><html>
	<head>
		<title>
			文字下划线、顶划线，删除线
		</title>
		<style>
			<!--
			p.one{text-decoration:underline;}
			p.two{text-decoration:overline;}
			p.three{text-decoration:line-through;}
			p.four{text-decoration:blink;}
			-->
		</style>
	</head>
	
	<body>
		<p class="one">下划线文字，下划线文字</p>
		<p class="two">顶划线文字，顶划线文字</p>
		<p class="three">删除线文字，删除线文字</p>
		<p class="four">文字闪烁</p>
		<p>正常文字对比</p>
	</body>
</html>
</span>

如上代码，分别设置了文字的下划线、顶划线和删除线的效果，此外，这里特殊的blink值，使得文字不断的闪烁，但是，IE中不支持这个效果，Firefox却支持的很好。

有时候文字不仅仅有一种效果，同时又下划线或者删除线，此时，可以同时将两个属性值，同时赋值给text-decoration，并用空格分开。

<span style="font-size:24px;"><html>
	<head>
		<title>
			文字下划线、顶划线，删除线
		</title>
		<style>
			<!--
			p.one{text-decoration:underline overline;}
			p.two{text-decoration:underline line-through;}
			p.three{text-decoration:overline line-through;}
			p.four{text-decoration:underline overline line-through;}
			-->
		</style>
	</head>
	
	<body>
		<p class="one">下划线文字，顶划线文字</p>
		<p class="two">下划线文字，删除线文字</p>
		<p class="three">顶划线文字，删除线文字</p>
		<p class="four">三种效果同时</p>
	</body>
</html>
</span>

可以发现各种效果可以同时运用在同一行文字上，为页面添加趣味性。