通过CSS实现渐变色边框

通过CSS实现渐变色边框的几种方法：

1. 使用border-image实现渐变色边框，边框圆角

.box{
 
	border-radius: 16px;
	
	border: 10px solid;
	
	border-image: linear-gradient(#8f41e9, #578aef,#ff5277)30 30;
 
}
 复制

这种方式虽然简单但有个明显的缺陷，不支持设置border-radius ，外框想设置成圆角需要加

clip-path: inset(0 round 10px);复制

优点: 内容背景可以透明

2. 使用 background-image实现渐变色边框，边框圆角

.box{
 
	border: 4px solid transparent;
	
	border-radius: 16px;
	
	background-clip: padding-box, border-box;
	
	background-origin: padding-box, border-box;
	
	background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
 
}复制

缺点：

• 内容背景不能半透明
• 实现复杂
• 不能使用padding
• 不是内圆角

3、border-image + overflow: hidden实现

.radius-gradient-border3{
    max-width: 300px;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}
.radius-gradient-border3 .inner{
    padding: 8px;
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, #387EE8, #f60) 1;
    color: #f60;
    background-color: rgba(255,255,255,0.7);
}复制

缺点： 需要多嵌套一层父元素，并且还需要设置overflow: hidden;

4、动态边框

.box{
 
	border-radius: 16px;
	
	border: 10px solid;
	
	border-image: linear-gradient(#8f41e9, #578aef,#ff5277)30 30;
	
	animation: light 3s linear infinite;
 
}
 
@keyframes light {
 
	0% {filter: hue-rotate(0deg);/*色调旋转*/}
	
	20% {filter: hue-rotate(100deg);/*色调旋转*/}
	
	40% {filter: hue-rotate(200deg);/*色调旋转*/}
	
	100% {filter: hue-rotate(360deg);/*色调旋转*/}
 
}复制