创建一个渐变的边框非常简单,可以给元素创建一个层级(z-index)较低的伪类,然后给这个伪类适当的长度和宽度,以及定位,给元素和伪类设置需要的背景颜色,就可以了。代码示例:
css:
.border1{
width: 200px;
height: 200px;
background: #ffffff;
position: relative;
margin: 50px;
}
.border1::before{
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background-image: linear-gradient(90deg, yellow, gold);
}
html:<div class="border1"></div>
效果图: