html圆角边框背景颜色,CSS之圆角边框渐变的实现

注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

对于普通的边框渐变，其作用于圆角边框渐变时会覆盖掉圆角的效果，这不是我们预期的，所以我们需要寻找其他的方法解决这个需求。

当盒子同时设置圆角(radius)和渐变时，圆角失效，因此不能用这种方式来实现圆角边框颜色渐变。但我们可以使用下面三个方法实现

1 使用背景重叠

在此之前我们先来看看三个跟背景有关的属性background-origin,background-clip,background-size。

background-origin表示的是背景起始位置，其三个值如下，依次是

border-box 从边框开始；

padding-box(默认) 从内边距开始；

content-box 从内容开始。

background-origin: border-box | padding-box(默认) | content-box

background-clip表示的是背景填充位置，其四个值如下，依次是

border-box(默认) 填充至边框；

padding-box 填充至内边距；

content-box 填充之内容；

text 作为字体前景色。