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>

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

CSS设置文字的划线相关推荐

php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
css 设置文字隐藏
css 设置文字隐藏设置display: none:但是这个设置后,后面的字体将会向前移动:就是隐藏之后不占位置: 设置opacity: 0 :会被子元素继承,但是不能设置子元素opacity:0来 ...
php 自定义行间距,CSS设置文字行间距的方法介绍（代码示例）
本篇文章的内容是关于CSS设置文字行间距的方法介绍,内容很详细,有需要的朋友可以参考一下. 对于行间距的设置肯定是需要行高属性line-height来设置间距.(相关推荐:CSS学习手册) 指定绝对值 ...
CSS设置文字不能被选中
设置文字不能被选中以下为css样式 -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-selec ...

CSS设置文字的划线

CSS设置文字的划线相关推荐

最新文章

热门文章