css实现渐变色圆角边框

目标

使用border-image可以设置渐变色边框，但是当它与border-radius组合使用时，两者却无法兼容。

因此，实现这个效果的另一个思路是：利用两个圆角矩形的面积差形成边框。故可以使用以下方法实现：

基础版本

使用嵌套的两个div，并设置父元素的内边距padding以此制造面积差，从而形成边框的效果。

<div class="border-box">
    <div class="border-content"></div>
</div>

.border-box{
  width: 200px;
  background:linear-gradient(0deg,#00135A,#01A1FF);
  border-radius: 5px;
  padding: 2px;/* 边框宽度 */
}
.border-content{
  width: 200px;
  height: 100px;
  border-radius: 5px; 
  background-color: white;  
}

简化HTML结构版：使用伪元素

使用伪元素充当背景也同样可以达到上述效果，注意设置z-index将伪元素置于内容之下

<div class="border-content"></div>

.border-content{
  width: 200px;
  height: 100px;
  border-radius: 5px;  
  position: relative;
  background-color: white;  
}
.border-content::before{
  content: '';
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 边框宽度 */
  border-radius: 5px; 
  background: linear-gradient(0deg,#00135A,#01A1FF);  
  z-index: -1;/* 置于内容之下 */ 
}

进阶版：使用background相关属性

给一个div设置两个不同大小的背景，从而利用两个背景制造面积差，也可以实现上述效果。

• 如何给div设置两个背景？

使用background-image属性设置两组颜色，一组是内容颜色，另一组是border边框颜色，用逗号隔开。

• 如何将两个背景设置成不同大小？

可以使用background-clip 属性，该属性规定了背景的绘制区域。给一组设置为padding-box（背景绘制区域从内边距框开始），第二组为border-box（背景绘制区域延伸至边框）。

此时的效果如下：

可以看出背景色并不是我们想要的效果，原因是这两组的绘制起点都是padding-box。

• 如何更改背景绘制区域的起点？

使用background-origin属性，该属性规定了背景的绘制区域相对于什么位置来定位。给一组设置为padding-box（背景绘制区域以 padding 区域为参考），第二组为border-box（背景绘制区域以 border 区域为参考）。

此时即可得到想要的效果，代码如下：

<div class="border-content"></div>

.border-content{
  width: 200px;
  height: 100px;
  border: 2px solid transparent;
  border-radius: 5px;
  background-clip: padding-box,border-box;
  background-origin: padding-box,border-box;
  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);
}

缺陷

该思路无法实现透明底的渐变色圆角边框。