如何实现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 只能切出外边的圆角，见下图：

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放一个好看的渐变，就得到如下效果：