通过CSS实现渐变色边框

原创已于 2024-01-11 10:50:35 修改 · 4.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2024-01-11 10:48:52 首次发布

本文介绍了四种通过CSS实现渐变色边框的方法，包括border-image、background-image、border-image配合overflow:hidden以及动态边框动画。分别讨论了它们的优缺点和适用场景。

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

}