如何实现css渐变圆角边框

Posted 2022-07-12 imgss

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

border-image 缺陷不支持圆角

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

border-image-source: linear-gradient(to right,#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