html下划线怎么添加

说实话，当我第一次学习 HTML 时，给文本添加下划线最直接的方法就是使用 标签。
我记得第一次使用它时，我正在写作业。
我需要标记中文专有名词，例如《红楼梦》的作者“曹雪芹”。
我刚刚添加了 标签，就完成了。
当时我就觉得很方便。
只需一行代码即可完成，谁关心语义呢？
但是后来当我接触CSS时，我发现标签有点像一本古老的年历。
我有一个客户端网站，使用将标题加粗，但是打印出来的结果完全乱了——标签根本没有粗细，而且浏览器默认的样式是下划线+文本，无法单独控制。
调试了很长时间，最后通过使用CSS解决了解决方案。

有趣的是CSS的结合，就像戏弄代码一样。
我曾经在一个产品介绍下划线，要求是使用“像手写一样的虚线”，我尝试了很长时间的text-decoration-line才对。
首先使用text-decoration:line-through连接基本下划线，然后单独设置text-decoration-line:dotted，最后添加过渡动画。
当鼠标向上移动时，下划线从虚线变为实线。
效果非常帅气，客户称赞其设计感很强。

但是说实话，现在的CSS写法显得有些冗长了。
上次我重构旧系统时，我完全依赖文本修饰来添加下划线。
后来我改用CSS模块化，直接将样式提取到变量中，像这样：text-decoration: underline var(--link-underline-color, 6 6 6 );。
需要改变颜色吗？ 只要改一个变量，代码量就减少一半，而且更不容易出现bug。

我也遇到了兼容性问题。
有一次尝试兼容老版本的IE系统时，根本无法识别text-decoration-line，最后只能返回text-decoration:underline。
虽然可以显示，但是不能玩点线、波浪线。
至于数据，我记得从IE1 1 开始才勉强支持text-decoration-line，但我建议你检查MDN以获取具体版本号。
我的记忆……它正常工作。

现在我的习惯是：使用进行简单的注释，比如对代码进行注释； 了解更多技巧，例如使用超链接标签和直接 CSS 装饰下划线。
一个特例是金融业。
法规要求所有链接必须带有蓝色下划线。
这种情况下就必须使用标签+CSS的组合，不能随便使用。

我个人没有做过这方面的移动适配，但按理来说，text-decoration-line应该比缩写更清晰，对屏幕阅读器友好。
但是有一个案例，App使用了CSS下划线，发现iOS系统默认会和链接进行交互。
最后用伪类解决了：a:hover{text-decoration: underline;...}。
因此，技术选择取决于场景。

html中虚线怎么设置

边框样式：点状 - 最快。
要自定义字符，请使用 ::after。
渐变很复杂并且包含很多细节。
使用 border-top 作为分割线。
要强调文本，请使用 border-bottom。
与现代浏览器兼容。
响应式，使用 em/rem。
伪元素比梯度更快。
为简单边框选择框架，为复杂边框选择渐变。
你自己掂量一下。

如何在多行文本中实现距离可调的下划线？

老实说，这很简单。
只需使用 CSS 即可。

我们先看一下基本操作。
只需在 p 标签下划线即可，没问题。
只需修饰文字：下划线；会做。
然后，如果您希望下划线和单词之间有一个空格，请使用 text-underline-offset。
例如：文本下划线偏移：5 px；将使下划线距文本 5 个像素。
你看，我试过了，5 像素刚刚好，不太远也不太近。

如果你想让它更花哨，为什么不在它下面加句号呢？没问题。
添加文字下划线样式：虚线；就是这样。
你想让下划线变成红色吗？文字装饰颜色：红色；这个问题问完了。
哪些字是蓝色的？颜色: 蓝色;这句话就可以了。

我已经给了你一个完整的例子。
看一下这个 HTML 文件，打开它并尝试一下。


<头> <meta name="viewport" content="width=device-width,first-scale=1 .0"> <title>可调整下划线示例</title> <风格> p { 文字装饰：下划线； 文本下划线偏移：5 px； 文本下划线样式：虚线； 文字装饰颜色：红色； 颜色: 蓝色; } </风格> </头> <正文>

多行文本

下面的黑色是text-decorative: underline;默认

效果 </正文> </>
您会看到，第一个 p 是红色点状下划线，第二个 p 是默认的黑色实线下划线。
就是这么简单。
你想要一条绿色的波浪线吗？文字下划线样式：波浪形；加装饰文字颜色：绿色；会那么做。
这就是工作。