如何实现css渐变圆角边框

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

border-image 缺陷不支持圆角

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

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

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

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

uploading-image-992112.png

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxyyg.html