圆角边框渐变

圆角和渐变都是我们常见的开发需求，像圆角则直接使用border-radius,边框渐变利用border-image+linear-gradient也可以很简单的实现：

border: 1px transparent solid;
border-image: linear-gradient(-156deg, #fbf6e3, #ff5b05);

但当盒子同时设置圆角和渐变时，圆角效果会被border-image覆盖掉，因此直接在上述代码里添加border-radius: 5px;无法实现圆角边框渐变的。

那我们可以换个实现思路，采用遮罩的方式，底色为渐变背景，内层为填充，未被遮挡的部分自然就显示为圆角边框。

基于此实现方式有：

（1）两个div，一个底色渐变用于背景一个内层填充

（2）[升级版]一个div，利用伪类元素after实现底色渐变背景

（3）[再升级版]一个div，利用background-image的多背景渐变和div盒模型尺寸padding-box,、border-box

1、2都比较好实现，重点说一下第3种。这里首先要介绍两个知识点：

（1）background-image可以添加多背景，使用”,”隔开，按照添加顺序依次由上往下层叠，谁先声明，谁层级高。同样background-origin，background-clip，background-size也可以设置多个值，来对应的是background-image。

（2）background-clip 可以设置元素的背景（背景图片或颜色）是否延伸到边框下面，实际体验戳👉background-clip。

基于此，我们可以先设置一个透明的边框，在background-image里设置两层背景，第一层是纯色内层填充，使用padding-box只延伸至内边距（padding）外沿,而第二层为渐变背景，使用border-box延伸至边框外沿。代码如下：

border-radius: 10px; /*设置圆角*/
border: 5px solid transparent; /*设置边框宽度并将颜色设为透明，确保背景渐变色显示*/
background-image: linear-gradient(#ffffff, #ffffff), /* 内层填充 */ linear-gradient(to right, #ffdd40, #ff3c41); /* 底色渐变 */
background-origin: border-box; /*规定背景图片的定位，从边框开始*/
background-clip: padding-box, /*设置内层背景延伸至内边距外沿*/ border-box; /*设置底色背景延伸至边框外沿*/

简化一下

border-radius: 10px;
border: 5px solid transparent;
background: linear-gradient(#ffffff, #ffffff) border-box padding-box,linear-gradient(to right, #ffdd40, #ff3c41) border-box border-box;

举一反三：
点击查看【codepen】