<!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是有局限性的，除非人肉为其准备
此路似乎在这个项目中行不通，只能考虑换用别的方法。仔细一想，我可以把带有渐变边框的元素分成两层：
原文地址：https://www.cnblogs.com/fger/p/10341247.html
时间： 2024-10-11 10:36:21