渐变边框

创建一个渐变的边框非常简单，可以给元素创建一个层级（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>
效果图：