目录
- 预期效果
- 解决方法
- 1.两层元素：外层渐变背景+圆角+内边距，里层圆角+背景色
- 2.伪元素：background-clip属性+伪元素+定位+元素本身背景（以伪元素背景色做边框）
- 3.单层元素： background-clip+background-iamge+background-origin
- 番外：clip-path属性
预期效果
最近遇到一个css样式，最终需要实现渐变色+圆角的边框，最开始我的想法是通过border-image和border-radius实现这种效果，后来发现这两个属性竟然不兼容。
border-image
border-image与border-radius属性分别可以实现渐变或圆角，但是不能一起用于渐变圆角边框（如图）。
官方给了一长串的解释，总的来说就是如果通过border-image属性给边框填充颜色，那么border-radius的裁剪效果就失效了。
贴了一个在线演示的地址，有兴趣的童鞋可以看一下
codepen演示地址：https://codepen.io/szy018/pen/MWGavvM
解决方法
反手贴一个在线地址，所有方法的代码都在里面，请自取。
codepen演示地址：https://codepen.io/szy018/pen/oNdjogm
1.两层元素：外层渐变背景+圆角+内边距，里层圆角+背景色
还是贴个代码吧，防止被骂：
<div class="example1 out">
<div class="in">两层元素</div>
</div>
.example1 {
&.out {
padding: 4px;
border-radius: 99px;
background: linear-gradient(to right, red, blue);
}
.in {
width: 100%;
height: 100%;
background: #fff;
border-radius: 99px;
}
}
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin-right: 20px;
}
这种方法其实是将外层元素的内边距当作边框，由于外层元素背景是渐变色，视觉上就做到了渐变色的圆角边框。
由于是用内边距做的边框，多少会有点瑕疵，像下图（左边为内边距做边框），可以看到内边距左边框的内角没有真正的边框内角丝滑。
是因为这是两个元素且大小不一样，所以需要分别计算两个元素的圆角大小才能百分百还原边框。
缺点：这种方法需要里外两个元素，而且内容背景不可以透明(否则会暴露出外层元素的背景色)。最最重要的是内外层元素圆角大小需要计算（多少有点麻烦）。总的来说，不推荐（因为我就是用的这个方法）。
2.伪元素：background-clip属性+伪元素+定位+元素本身背景（以伪元素背景色做边框）
所有方法的代码都贴在那个地址里了哦，所有box类的样式都是一样的，这里就不贴了
<div class="example2 box">伪元素</div>
.example2 {
border: 4px solid transparent;
position: relative;
border-radius: 99px;
background-color: #fff;
background-clip: padding-box;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: 99px;
background: linear-gradient(to right, red, blue);
}
}
background-clip属性非常好用，译名背景剪辑，它可以决定显示那一部分的元素背景，默认为border-box（边框及边框以内）。还有两个属性padding-box（内边距及内边距以内），content-box（文本内容区域）。
我们可以通过伪元素，将伪元素全部显示，而元素本身使用padding-box属性值，元素本身给一个透明色的边框，防止伪元素因为超出元素区域显示不出来。
就可以实现以下效果（显示的是伪元素的背景，但是区域是元素本身真实的边框区域）
缺点：和方法以一样，内容背景不可以透明
background-clip兼容性还是很好的：
3.单层元素： background-clip+background-iamge+background-origin
这个方法强烈推荐，简洁优雅
.example3 {
border: 4px solid transparent;
border-radius: 99px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #fff),
linear-gradient(to right, #8f41e9, #578aef);
}
背景属性都可以设置多个值，通过逗号分割。从左到右显示优先级依次递减，即先声明的背景会遮盖住后声明的背景。那我们就可以通过声明两个背景实现渐变色圆角边框，通过background-image设置两个背景色，然后使用background-clip属性设置第一个背景显示padding-box区域，第二个背景显示border-box区域（效果如图）。
缺点：还是内容背景不可以透明
以上三种方法都有个致命的缺点，由于都是背景填充作为边框，所以无法做到背景透明。
番外：clip-path属性
以上就是渐变色圆角边框的解决方法，由于这些方法都没法做到透明背景色，我查到了clip-path属性（裁剪属性）。
clip-path属性： 使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。
裁剪属性可以做到裁剪元素内容为自己想要的区域，他有一个inset（）属性。例如，inset(0 round 10px)，裁剪一个元素，大小为紧贴着这个元素（即0，相当于该元素相同大小），且边框为10px的圆角（round 10px）。
元素本身为矩形，但是因为裁剪属性只裁剪到10px的圆角边框，所以多余的部分就被隐藏掉了（如图）。
虽然无法实现全圆角边框渐变，但可以实现矩形圆角渐变+透明背景。
以下是clip-path属性兼容性（不太行，几乎所有浏览器都需要加前缀）：
暂时还未发现有啥纯css方法可以实现 全圆角渐变色边框+内容背景透明。
如果以后发现了，我会更新在下方。或者有大佬知道做法的，可以指导一下我，谢谢各位小伙伴。
