一、渐变边框

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    
.gradient-border{ 
    height: 200px;
    border: 5px solid transparent; 
    border-image: linear-gradient(to bottom, #0099CC, #F27280); 
    border-image-slice: 1;  
}

</style>
<body>
    <div class="gradient-border" >
        ssda
    </div>

</body>
</html>

　　虽然border-image和linear-gradient()配合在一起，能实现渐变的边框效果，但它也有一定的缺陷性，比如我们项目中的按钮是带圆角的。那么对于这种情形，就算是你使用了border-radius也是无用：

这是因为border-image中引用的是一张不带圆角的图片（linear-gradient()就相当于一张背景图）。也就是说，如果你需要一个带圆角的渐变边框，那么使用border-image是有局限性的，除非人肉为其准备

此路似乎在这个项目中行不通，只能考虑换用别的方法。仔细一想，我可以把带有渐变边框的元素分成两层：