css在文字中间插入下划线,CSS实现文字自定义下划线

尽管CSS有一个下划线属性text-decoration: underline，但这个属性非常简陋而且不能修改效果。

解决方案一

使用border属性{

border-bottom: 1px solid gray;

text-decoration: none;

}

使用border-bottom模拟出来的下划线可以自定义颜色、线条宽度和线的形状。但是线与字之间的距离或者说空隙很大

如果设置比较小的line-height，比如line-height: .9，距离的确能缩小，但又产生另一个问题：阻止正常的文本换行。

解决方案二

使用background-image属性background: linear-gradient(gray, gray) no-repeat;

background-size: 100% 1px;

background-position: 0 1.115em;

text-shadow: .05em 0 white, -0.05em 0 white;

效果非常棒。也可以实现不同的线条类型：比如虚线下划线background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;

background-size: .2em 2px;

backgrond-position: 0 1em;

通过色标的百分比位置值来微调虚线的虚实比例，还可以通过background-size来改变虚线的疏密。

最后

分享给正在学习CSS的小伙伴们，视频中会介绍使用 CSS 为 HTML 添加样式，使用 CSS 布局网页。在学习 CSS 之前必须学过 HTML。如果你已经在使用 CSS 制作网页，那这个视频并不会给你带来更多新的知识，当然你也可以把它当做回顾使用。

层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力