杜郎俊赏 - dujun.io

波浪下划线

本站对文字的重点标记,经过了几次改版。

一、着重号

最初使用着重号。它的问题是会造成段落间距变大,同时大圆点标记过于醒目,抢夺阅读视线。

text-emphasis: filled circle;
text-emphasis-position: under;

效果如:对照文字、着重号标记的文字

二、虚线下划线

着重号用了没多久,就改成虚线下划线了。

border-bottom: 2px dotted;

效果如:对照文字、虚线下划线标记的文字

三、波浪下划线

虚线下划线没什么问题,但是今天突然觉得平庸了,决定改成波浪线。

代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下:

padding: 8px 0;
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x, radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);

效果如:对照文字、波浪下划线标记的文字

标签: 开发 前端
日期:2022-08-02