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

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

技术杂谈小彩虹2021-07-15 12:54:0070A+A-

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

答案:可以

.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>

哈哈我是不是很聪明

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们