边框渐变不能实现圆角如何解决

1,631 阅读1分钟

问:边框可以实现渐变吗?

答案:可以

.border-block {
	width: 100px;
	height: 100px;
	border: 10px solid transparent;
	border-image: linear-gradient(to top, blue, red);
	border-image-slice: 10;
}
<div class="border-block"></div>

边框的确可以用渐变来写,但是不支持圆角,如果想要支持圆角怎么办呢?

我用背景色的渐变和padding实现的

.bigbox { 
   width: 100px; 
   height: 100px; 
   box-sizing: border-box; 
   padding: 5px; 
   border-radius: 50%; 
   background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);  
   background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%); 
   background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);  
}
.box { 
   width:100%; 
   height:100%; 
   border-radius:50%; 
   background:#fff; 
}
<div class="bigbox">
   <div class="box"></div>
</div>

哈哈我是不是很聪明