CSS text-decoration实现宽度自适应波浪线

我们在文章和布局中经常会用到分隔线，传统的分隔线都是一条直线，或者虚线，或者点线，颠来倒去就这些，早都已经看腻了。

你说我们是不是可以用波浪线来进行分隔呀，就像下面这样的实时效果（不支持浏览器为直线），说不定设计师小姐姐和小哥哥们看完效果之后会对你交口称赞。

好漂亮的大波浪，如何实现的呢？一大波小伙伴围观了过来。

实现的代码如下：

wavy {
    display: block;
    height: .5em;
    white-space: nowrap;
    letter-spacing: 100vw;
    padding-top: .5em;
    overflow: hidden;
}
wavy::before {
    content: "\2000\2000";
    /* IE 浏览器实线代替 */
    text-decoration: overline;
    /* 现代浏览器 */
    text-decoration: overline wavy;
}

然后在我们的页面上需要的地方插入以下代码即可：

<wavy></wavy>

效果图如下：

波浪线实现原理是什么呢？

伪元素生成两个空格，使用 letter-spacing 属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度 100%自适应的波浪线效果就实现了。

优点

这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用 color 属性就好啦。大小也非常容易控制，使用 font-size 属性就好了。

不足-兼容性

这个方法缺点就在于兼容性不太够，wavy 本质上 text-decoration-style 属性的值，不过由于 Safari 浏览器并不支持 text-decoration-style 属性，因此，Safari 浏览器下没有波浪线效果，这个有点头疼，因此，text-decoration:wavy 实现的波浪线效果只适合用在体验渐进增强的场景。

例如本文所示的分隔线场景，如果浏览器不支持，那还是回到以前的直线效果，如果浏览器支持，就使用更好的波浪线效果。

这时，搞事的小伙伴问了，IE 浏览器的兼容性如何？

我去！那还要说吗？还要说吗？毫无疑问，肯定……不支持！

最后，复工潮即将到来，虽然疫情在我们伟大国家领导带领下，经过大家共同的努力下得到一定控制，但是还是要做好防护。得不到政府解封的公布信息，还是一如既往的保护好自己。

原文链接：《CSS text-decoration 实现宽度 100%波浪线效果》

以上关于CSS text-decoration实现宽度自适应波浪线的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。