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实现宽度自适应波浪线