css渐变色边框

前提

了解 background-image相关设置、了解mask遮罩相关设置, border-image这里不介绍了，无法设置圆角不常用

方式1：background-image + background-clip + background-origin

利用这三个属性可以在div的border或padding上形成渐变色边框

<div class="basebox demo1" />

.basebox {
	width: 2rem;
 	height: 2rem;
  	border-radius: 0.2rem;
  	box-sizing: border-box;
  	text-align: center;
}
/* border渐变色边框 */
.demo1 {
  	border: 0.1rem solid transparent;
  	background-clip: padding-box, border-box;
  	background-origin: padding-box, border-box;
  	background-image: linear-gradient(to right, #23eb20, #23eb20), linear-gradient(to right bottom, red, #578aef, #444444);
}
/* padding渐变色边框 */
.demo2 {
  	padding: 0.1rem;
  	background-image:linear-gradient(0deg, lightgreen, lightgreen), linear-gradient(0deg, red, blue);
  	background-clip: content-box, border-box;
  	background-origin: content-box, border-box;
}

方式2：两层div叠加

问题：例外圆角大小要详细调整，要不然看着不自然

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

.c {
	width: 2rem;
 	height: 2rem;
  	border-radius: 0.2rem;
  	box-sizing: border-box;
  	text-align: center;
  	background: linear-gradient(to right bottom, red, blue) no-repeat;
  	padding: 0.1rem;	
}

.content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #23eb20;
    border-radius: 0.1rem;
}

方式三：背景透明的渐变色边框：background-image + mask遮罩

.d {
	width: 2rem;
 	height: 2rem;
  	border-radius: 0.2rem;
  	box-sizing: border-box;
  	text-align: center;
  	padding: 0.1rem;
  	background-image: linear-gradient(0deg, red, blue);
  	mask-image: 
  		linear-gradient(to right, rgba(0,0,0, 1),rgba(0,0,0,1)),
  		linear-gradient(to right, rgba(0,0,0, 1), rgba(0,0,0,1));
  	mask-clip: content-box, border-box;
  	mask-composite: exclude;
}

同样理解了 background-image与mask的设置可以将渐变色边框设置到border为止。