最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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%波浪线效果

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS text-decoration实现宽度自适应波浪线

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发