前端 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博客

相关文章

 您阅读本篇文章共花了：