background 渐变_CSS之圆角边框渐变的实现

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

之前《CSS之渐变效果的实现》中有讲到边框颜色渐变，但是只有讲最普通的边框渐变，其作用于圆角边框渐变时会覆盖掉圆角的效果，这不是我们预期的，所以我们需要寻找其他的方法解决这个需求。

当盒子同时设置圆角(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 作为字体前景色。

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

background-size表示的是背景尺寸，其五个值如下，依次是

• contain 将图像扩大至适应最短的边，剩余部分默认重复图像
• cover 将图像扩大至适应最长的边，图像可能显示不完整
• length 两个值依次设置图像宽和高，未设置则为auto
• percentage 两个百分比依次设置图像宽和高，未设置则为auto
• auto 默认设置

background-size: contain | cover |  |  | auto(默认)

以下面代码为例

div { width: 900px; height: 300px; margin: 10px; padding: 30px; border:50px solid transparent; background-origin:border-box; background-clip: content-box,padding-box, border-box; background-size: contain,50px 50px,cover; background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");}

效果如图

由上面的例子我们可以看出：

1. background-image可以多次添加图片或者渐变，需要用