如何实现css渐变圆角边框

作者 : 开心源码 本文共1106个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共137人阅读

最近设计师的风格发生突变,一句话概括就是,能用渐变的地方绝对不用纯色。这不,就整出了一个渐变圆角边框。这渐变好做,圆角好做,渐变圆角也没问题,可是在加个边框还是有点坑的。没办法,看看怎样实现吧

border-image 缺陷不支持圆角

首先想到的是 border-image 的实现方式,用一个渐变作为 border-image:

border-image-source:linear-gradient(toright,#08fdd8,#F58549,red);

然而使用完 border-image 之后,border-radius 是无效的,达不到圆角的效果。

你可能想到了借助 clip-path,但是 clip-path 只能切出外边的圆角,见下图:

background-image/background-clip

那么难道就没办法了吗?不,只需思想不滑坡,办法总比困难多~,借助上面标题中的两位,我们可以完美实现这个效果。background-image 大家应该都不陌生,那么 background-clip 又是个什么东东呢?

众所周知,盒模型中的三个 box:border-box,padding-box,content-box。当我们设置 background-image 时,默认是设置在 border-box 上的。但是借助 background-clip 我们可以实现将 background-image覆盖其余盒子,此外,他还支持多个盒子一起设置。这,这真的是太棒了。

于是,我们将content-box放一个白色渐变,在padding-box放一个好看的渐变,就得到如下效果:

嵌套和:after 伪类

那么,还有别的方案吗?最容易想到的是嵌套,外面的元素负责渐变,里面的元素负责纯色。伪类的实现原理也是一样的。这里就不详细开展了,参看下面的demo:

animation

有时候,设计师还想在边框上加少量动画,尽管我还没遇到,但是,有备无患嘛,下面是收集的少量例子:

https://codepen.io/luoyjx/pen/dWjxNP

https://codepen.io/akinzmn/pen/OeWoga

https://codepen.io/dominikcichon/pen/Gzwqbv

通过怎样样的学习,才能成为合格的WEB前台工程师?假如现在的你很迷茫,可以+web前台扣扣裙:939106847 免费网课在线学习以及问题解答、项目指导服务,配合强大的学习工具,带你

完成九大实战项目,经历从零基础到专业前台工程师的完美蜕变。

欢迎初学和进阶中的小伙伴。裙里有免费的学习资料,还有专业老师为你解惑,更有免费体验课、免费直播课等福利不定期放送。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 如何实现css渐变圆角边框

发表回复