CSS中的“淡化”边框答案

【问题标题】："Fade" borders in CSSCSS中的“淡化”边框
【发布时间】：2010-12-23 17:12:46
【问题描述】：

我在一个元素上使用border-left: groove，但我希望边框“淡入”到背景中，因为它即将在底部结束。

我希望我说得通。我将如何实现这种效果？

【问题讨论】：

最好使用渐变图像

标签： css

【解决方案1】：

您还可以使用具有较高模糊值的box-shadow 属性和rgba() 颜色来设置不透明度级别。在你的情况下听起来是一个更好的选择。

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

【讨论】：

被低估的答案这可能是一个更好的解决方案，即使它在技术上不是边界编辑：我刚刚看到了这一年
还要注意附加参数“spread radius”，它可以用来改变衰落区域的大小，例如box-shadow: 0 30px 40px 40px rgba(0,0,0,.1);，另见conceptboard.github.io/box-shadow-spread-examples

【解决方案2】：

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

但是，我从未见过它被使用过，而且我不知道当前浏览器对它的支持程度如何。您当然需要接受，至少您的一些用户将无法看到它。

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

希望对您有所帮助。

【讨论】：

这有点误导吗？据我所知，文本颜色不能是渐变色。
@MildFuzz - 嗯？我不认为这个问题或答案在任何地方都提到了文本颜色。都是关于边框颜色的。
当我阅读它时，我认为它暗示CSS3中的所有颜色都可以是渐变。你不认为它可以更清楚吗？
我想可以。如果您愿意，请随时对其进行编辑以澄清。 :-)

【解决方案3】：

如何使用 CSS 淡化边框：

<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>

为了演示，请原谅内联样式。边框图像的 1 属性是边框图像切片，在这种情况下，将边框定义为单个连续区域。

来源：Gradient Borders

【讨论】：

【解决方案4】：

将此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

【讨论】：

【解决方案5】：

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

使用border-image CSS property，我能够快速操纵边框来实现这种淡化效果。

注意：我不认为 border-image 与 border-radius 配合得很好...我在某处看到有人这么说，但出于这个目的它工作得很好。

1 班轮：

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>

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

最简单的淡化方法

当你为不同的边框提供不同的参数时，浏览器会尽力做到最好，并以某种方式在它们之间进行插值。您可以使用此行为来生成某些褪色边框，例如：

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

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

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

【讨论】：