通过CSS实现渐变色边框-Toy模板网

这篇具有很好参考价值的文章主要介绍了通过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;文章来源地址https://www.toymoban.com/news/detail-788243.html

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);/*色调旋转*/}

}