CSS中如何实现“淡化”边框效果

Question

我在一个元素上使用了border-left: groove，但我希望边框在接近底部结束时“淡出”到背景中。我希望自己说得清楚。我该如何实现这样的效果？

- john2x

---

最好使用渐变图像来完成此操作。 - Agile Jedi

Answer 1

你还可以使用box-shadow属性，增加模糊值和使用rgba()颜色来设置透明度。在你的情况下，这听起来更合适。

box-shadow: 0 30px 40px rgba(0,0,0,.1);

- daniel.tosaba

---

这个答案被低估了，尽管它并不严格符合边境的定义，但可能是一个更好的解决方案。 编辑：我刚看到年份。 - Joss Bird

请注意附加参数“扩散半径”，可用于更改淡化区域的大小，例如 box-shadow: 0 30px 40px 40px rgba(0,0,0,.1);，请参见 https://conceptboard.github.io/box-shadow-spread-examples/。 - klues

Answer 2

您可以在CSS3中为某些情况下的颜色指定渐变效果，当然可以将边框设置为颜色，因此您应该能够使用渐变作为边框颜色。这将包括指定透明颜色的选项，这意味着您应该能够实现您想要的效果。

但是，我从未见过它被使用，也不知道当前浏览器对其支持有多好。您肯定需要接受至少一些用户无法看到它的事实。

快速谷歌搜索出现了以下两个页面，这应该会帮助您开始：

• CSS3 Gradient Borders
• http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

希望对您有所帮助。

- Spudley

---

这有点误导人吗？据我所知，文本颜色不能是渐变的。 - Mild Fuzz

@MildFuzz - 嗯？我不认为这个问题或答案在任何地方提到了文本颜色。它都是关于边框颜色的。 - Spudley

当我阅读它时，我认为它暗示CSS3中的所有颜色都可以是渐变。您不认为它可以更清晰吗？ - Mild Fuzz

我猜可以。如果你愿意，随意编辑以澄清。 :-) - Spudley

Answer 3

一个简单的边框渐变

当你为不同的边框提供不同的参数时，浏览器会尽力并以某种方式进行插值。您可以利用这种行为来生成特定的渐变边框，例如此示例：

https://codepen.io/dkellner/pen/rNpJwyB

 .your-element {
     border:1px solid black;
     border-left:150px solid transparent;
     border-right:150px solid transparent;
 }

虽然这不完全是操作员想要的，但在许多情况下已经足够了。而且看起来很酷。 在示例中，您将看到另一个版本，其中1px边框被替换为3px，产生了另一个酷效果，就像用笔绘制一样。

- dkellner

---

太棒了，简直让我大开眼界。 - efkah

太棒了，简直让我大开眼界。 - undefined

Answer 4

如何使用CSS淡化边框：

文本

为了演示，对于内联样式请多多包涵。在这种情况下，边框的1属性是border-image-slice，并将边框定义为单个连续区域。

来源：渐变边框

- stackunderflow

Answer 5

对于渐变边框，我使用box-shadow CSS属性

.box{
box-shadow: inset 0 0 10px #311b0b;
}

- Om Fuke

---

请注意，这是一个内置边框，如果您需要一个向外淡化的边框，则应该使用outset。 - Joe Moore

Answer 6

将这个 class css 添加到您的样式表中。

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

将width设置为您的图像的width。并使用此html标记用于图像

<div class="border_gradient">
        <img src="image.png" />
</div>

虽然可能不能完全呈现相同的边框效果，但它可以在边框上增加一些渐变效果。

来源：CSS3 Borders

- Luzan Baral

Answer 7

我知道这已经过时了，但在2020年，这对我似乎很有效...

使用border-image CSS 属性，我能够快速地操作边框以实现淡入淡出的效果。

注意: 我认为border-image与border-radius不太兼容... 我在某个地方看到有人这样说，但对于这个目的，它运作良好。

一行代码：

CSS

 .bbdr_rfade_1      { border: 4px solid; border-image: linear-gradient(90deg, rgba(60,74,83,0.90), rgba(60,74,83,.00)) 1; border-left:none; border-top:none; border-right:none;  }

HTML

<div class = 'bbdr_rfade_1'>Oh I am so going to not up-vote this guy...</div>

- JSG