CSS3实现边框圆角渐变色

开发支付宝小程序的时候，因为页面比较酷炫，需要涉及到的样式比较多，需要实现边框渐变色这样的一个样式，总结一下我在项目里面的实现方法。

一、单层元素实现

用以下属性实现：

border、        background-clip、background-iamge、background-origin

具体代码：

.example {
  border: 4rpx solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  /*第一个linear-gradient表示内填充渐变色，第二个linear-gradient表示边框渐变色*/
  background-image: linear-gradient(180deg, #FFCFBF 0%, #ED5A45 80%),
  linear-gradient(#FFD4C2, #ED5A45);
}

以上的代码可以同时实现填充渐变色和边框渐变色。

二、伪元素实现

用以下属性实现：

border、background-color、background-clip

在伪元素::before的属性：

position、top、left、bottom、right、z-index、background

具体代码：

/*支付宝小程序的度量单位为rpx*/
.example2 {
  position: relative;
  border: 8rpx solid transparent;
  background-color: linear-gradient(90deg, #D2FCFE 0%, #A4CEFB 98%);
  background-clip: padding-box;
  border-radius: 42rpx;
}
.example2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 42rpx;
  background: linear-gradient(to right, #D2FCFE, #2D68D7);
}

*补充参考文档：

CSS linear-gradient() 函数 | 菜鸟教程

CSS样式：渐变色圆角边框_border渐变色 圆角_大丨阳的博客-CSDN博客