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

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

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

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>

效果图如下:

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

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

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

优点

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

不足-兼容性

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

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

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

我去!那还要说吗?还要说吗?毫无疑问,肯定……不支持!

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS text-decoration实现宽度自适应波浪线

发表回复