CSS：简单实现渐变边框

马黑黑

之前我们至少有过两个帖子介绍过盒子的渐变边框，它们都是用 clip-path 实现，很酷很酷，感兴趣的朋友可以搜一搜。

这里再讨论另一种实现方法。不多说，先上酸菜，哦不对，先上代码：

1. <style>
   
2. .mydiv {
   
3.         margin: 20px auto;
   
4.         width: 400px;
   
5.         height: 120px;
   
6.         border: 4px solid tan;
   
7.         border-image: linear-gradient(60deg,red,navy,orange,magenta) 4;
   
8.         background: gray;
   
9. }
   
10. </style>
    
11. 
    
12. <div class="mydiv"></div>

复制代码

核心代码在第6、7行：

第6行：设定border边框样式，边框厚度4px，实心，颜色是tan。边框颜色这里无关紧要，它将被后面的设置覆盖。

第7行：利用 border-image 属性设置边框图片，这个属性语法很复杂，但是我们不用图片而用渐变，语法就很简单。我们使用线性渐变，渐变语句之后面随便跟一个数字，如果不放心，数字之后再加一个 repeat，效果就出来了。

马黑黑

马黑黑

这个实现方式，做不出圆角额。不过有其他方法：

其一：我们之前介绍的 clip-path 方法就是做圆角的，可以在本坛找一找。

其二：在本帖的基础上，利用伪元素配合，同样可以做出圆角渐变边框，感兴趣的可以查看——

    利用伪元素实现圆角渐变边框 (freeee.ml)

焱鑫磊

欣赏老师佳作！

樵歌

加分走人

雨中悄然

水中花的边框

马黑黑

雨中悄然 发表于 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
不水，漂亮的很

谢谢

樵歌

马黑黑 发表于 2023-4-2 16:24
感谢支持

必须的

红影

这个渐变边框漂亮，即使不圆角，已经很漂亮了

马黑黑

红影 发表于 2023-4-2 22:00
这个渐变边框漂亮，即使不圆角，已经很漂亮了

渐变能带来观感上的不同感受

马黑黑

樵歌 发表于 2023-4-2 21:25
必须的

太感谢了

樵歌

马黑黑 发表于 2023-4-2 22:24
太感谢了

太客气了

马黑黑

樵歌 发表于 2023-4-3 06:35
太客气了

应该的应该的

红影

马黑黑 发表于 2023-4-2 22:24
渐变能带来观感上的不同感受

是啊，感觉更灵动，不那么单调了。

马黑黑

红影 发表于 2023-4-3 15:50
是啊，感觉更灵动，不那么单调了。

其实单调才是主流

樵歌

马黑黑 发表于 2023-4-3 08:38
应该的应该的

应该感谢你无私奉献