CSS怎么设置下划线、删除线、上划线属性样式

哈，你说的我基本明白了。
上周，当客户问我如何在产品的促销价格中添加折扣线时，我使用了 text-decoration:line-through。
白色的线条和浅灰色的背景，很明显是折扣价。

但是，如果您感到困惑，例如，如果您原本想在下划线下强调某个关键词，但最终用手指将其打掉，则读者可能会感到困惑。
记得2 02 3 年在上海某商场举办活动时，一位页面设计者删除了重要链接，被客户骂了一顿。

overline 上划线实际上用得较少，不是吗？除非有特殊符号或数学公式，通常是不必要的。
不过，text-decoration-color 相当方便。
例如，如果您在错误消息中添加鲜红色下划线，您将立即收到视觉提醒。
我上次使用它向表单提供错误消息，用户体验要好得多。

您问这些属性组合使用会不会有问题？说实话，我尝试过添加实线或点线文本装饰风格，现在在普通浏览器中没有问题。
但如果你想创建像波浪或波浪这样的波浪线样式，我建议你先检查目标用户的浏览器统计信息。
真的没有人被困在那里使用旧的古董浏览器。
反正我也遇到过一次。
经过两个小时的排查，终于发现是某客户公司服务器限流导致的。
我不能笑也不能哭。

如果你真想玩点花样，可以试试text-decoration-weight和text-underline-offset，让下划线有三维效果。
但说实话，用多了就会变得俗气，所以审美得控制一下。

css下划线怎么设置

说白了，CSS下划线控制其实涉及到三件事：改变样式、改变颜色、改变位置。

我们先来说说最重要的事情。
去年我们跑了一个电商项目，用了text-decoration-style:wavy和text-decoration-color来勾勒品牌颜色。
当 3 000 个用户滑动时，波浪线过渡很自然。
另外，只需使用 text-decoration:none 删除超链接下划线，但不要忘记添加 :hover 来恢复交互，例如 a:hover{text-decoration:underline double}。
还有一个更重要的细节。
text-underline-offset 可以调整下划线偏移量。
去年，竞争对手的产品落入了陷阱。
它使用 4 px 来卡在文本下方的间隙中。
现在新项目必须添加此检查。

一开始以为文字装饰缩写可以直接带偏移量，后来发现不行，需要单独写。
等等，还有别的事。
老版本的IE根本不支持文本装饰样式，所以复杂的效果需要浏览器检测。

建议再次尝试text-underline-offset。
如今，设计就是为了美。
3 -5 px的偏移可以拯救很多平庸的下划线设计。

css样式中怎样控制下划线的粗细?

需要明确的是，使用 border 属性来改变底层样式确实更加灵活。
我们先来说说最重要的事情。
边框功能可以精确控制边框的粗细、颜色和样式。
比如我们去年跑的H5 项目中，使用边框向下比使用文字装饰更容易。
另一方面，border-down专门管理下边界。
去年，群里的一个同学差点把上界搞混了。
还有一个关键细节比如border-bottom: 2 pxsolid FF0000是这样写的，2 px是粗细，solid是实线，FF0000是颜色代码。
去年有一个遵循这种颜色六角形的设计草图。
说实话，这很令人困惑。
一开始我以为可以直接改变文字装饰，后来发现没有办法适当控制粗细。
等等，还有一件事，记住只将宽度设置为 1 8 0 像素，不要让它默认占据整个屏幕。
去年有同学解决了这个问题好久。
根据实际内容调整宽度，不要只拘泥于数字。
最后，记得使用预览来查看结果。
不要把自己埋在代码中而忘记检查它。