&引用；“褪色”；CSS中的边框

我在元素上使用了

border left:groove

，但我希望边框“淡入”背景，因为它将在底部结束

---

我希望我说的有道理。我怎样才能达到这样的效果

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

然而，我从未见过它被使用过，我也不知道当前的浏览器对它的支持有多好。您当然需要接受这样一个事实：至少您的一些用户将无法看到它

一个快速的谷歌打开了这两个页面，这应该会帮助你前进：

---

希望对您有所帮助。

您也可以使用具有较高模糊值和

rgba（）

颜色的

box shadow

属性来设置不透明度级别。 听起来对你来说是个更好的选择

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

---

将此

类

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>

虽然它可能不会给出相同的精确边界，但会在边界上显示一些渐变外观

---

来源：

如何使用CSS淡化边框：

Text

为了演示，请原谅内联样式。边界图像的1属性是边界图像切片，在本例中，将边界定义为单个连续区域

---

资料来源：

我知道这很旧，但在2020年对我来说似乎效果不错

使用该工具，我能够快速地操纵边界以实现此目的

注意：我认为

边框图像

不适合

边框半径

。。。我看到有人在某处这样说，但出于这个目的，它很有效

1班轮：

CSS

HTML

噢，我不会投票给这个家伙的。。。

对于淡入淡出的边框，我使用框阴影CSS属性

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

---

最好使用渐变图像，这有点误导吗？据我所知，文本颜色不能是渐变色。@MildFuzz-eh？我不认为这个问题或答案在任何地方提到文本颜色。这都是关于边框颜色的。当我读到它时，我认为CSS3中的所有颜色都可以是渐变色。你不认为可以说得更清楚吗？我想可以。如果您愿意，请随意编辑以澄清。：-）低估答案这可能是一个更好的解决方案，即使它在技术上不是一个边界编辑：我刚刚看到了年份，还注意了可用于更改淡入区域大小的附加参数“扩散半径”，例如，

box shadow:0 30px 40px 40px rgba（0,0,0,0,1），另请参见
<div class = 'bbdr_rfade_1'>Oh I am so going to not up-vote this guy...</div>

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