css边框渐变色处理圆角解决方案

css边框渐变色处理圆角解决方案

使用css 边框渐变属性，可以实现不带圆角的边框渐变：代码如下：

.box{
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(0deg, 
  #79c8ff 1%, 
  #dc4f97 31%, 
  #f85658 46%, 
  #ff7b4f 70%, 
  #ffa469 100%);
  border-image-slice: 1;
}

但是如果要带上圆角，上面的代码是无法实现的。也就是使用了边框渐变后，无法通过设置boreder-radius 来设置圆角，尽管你加上boreder-radius属性后，还是不会变成圆角。

由此，采用了一种折中的方案。即：多加一层元素

1、给外层元素增加padding值，padding值的大小为边框所需的大小。

2、给外层元素设置渐变色背景。

案例代码

<div class="box">
	<div class="content"></div>
</div>

.box{
    padding: 1px;
    background-image: linear-gradient(0deg, #79c8ff 1%, #dc4f97 31%, #f85658 46%, #ff7b4f 70%, #ffa469 100%);
    border-radius: 4px;
   box-sizing: border-box;
   overflow: hidden;
}
.content{
   	height: 200px;
  	background-color: #1d3d8e;
    border-radius: 4px;
  	box-sizing: border-box;
    overflow: hidden;
}

实现的样式：