CSS：简单实现渐变边框
之前我们至少有过两个帖子介绍过盒子的渐变边框，它们都是用 clip-path 实现，很酷很酷，感兴趣的朋友可以搜一搜。这里再讨论另一种实现方法。不多说，先上酸菜，哦不对，先上代码：
<style>
.mydiv {
margin: 20px auto;
width: 400px;
height: 120px;
border: 4px solid tan;
border-image: linear-gradient(60deg,red,navy,orange,magenta) 4;
background: gray;
}
</style>
<div class="mydiv"></div>核心代码在第6、7行：
第6行：设定border边框样式，边框厚度4px，实心，颜色是tan。边框颜色这里无关紧要，它将被后面的设置覆盖。
第7行：利用 border-image 属性设置边框图片，这个属性语法很复杂，但是我们不用图片而用渐变，语法就很简单。我们使用线性渐变，渐变语句之后面随便跟一个数字，如果不放心，数字之后再加一个 repeat，效果就出来了。
<style>
.mydiv {
margin: 20px auto;
width: 400px;
height: 120px;
border: 4px solid tan;
border-image: linear-gradient(60deg,red,navy,orange,magenta) 4;
background: gray;
}
</style>
<div class="mydiv"></div> 这个实现方式，做不出圆角额。不过有其他方法：
其一：我们之前介绍的 clip-path 方法就是做圆角的，可以在本坛找一找。
其二：在本帖的基础上，利用伪元素配合，同样可以做出圆角渐变边框，感兴趣的可以查看——
利用伪元素实现圆角渐变边框 (freeee.ml)
欣赏老师佳作！{:4_204:} 加分走人{:4_428:} 水中花的边框 雨中悄然 发表于 2023-4-2 12:51
水中花的边框
这个不水 樵歌 发表于 2023-4-2 12:47
加分走人
感谢支持 焱鑫磊 发表于 2023-4-2 09:07
欣赏老师佳作！
下午好 马黑黑 发表于 2023-4-2 16:21
这个不水
不水，漂亮的很 雨中悄然 发表于 2023-4-2 19:21
不水，漂亮的很
谢谢{:4_181:} 马黑黑 发表于 2023-4-2 16:24
感谢支持
必须的 这个渐变边框漂亮，即使不圆角，已经很漂亮了{:4_187:} 红影 发表于 2023-4-2 22:00
这个渐变边框漂亮，即使不圆角，已经很漂亮了
渐变能带来观感上的不同感受 樵歌 发表于 2023-4-2 21:25
必须的
太感谢了 马黑黑 发表于 2023-4-2 22:24
太感谢了
太客气了 樵歌 发表于 2023-4-3 06:35
太客气了
应该的应该的{:4_170:} 马黑黑 发表于 2023-4-2 22:24
渐变能带来观感上的不同感受
是啊，感觉更灵动，不那么单调了。 红影 发表于 2023-4-3 15:50
是啊，感觉更灵动，不那么单调了。
其实单调才是主流 马黑黑 发表于 2023-4-3 08:38
应该的应该的
应该感谢你无私奉献{:4_176:}