Question

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

我希望我有意义。我将如何实现这一目标？

Answer 1

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

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

Answer 2

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

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

快速谷歌出现了这两个页面，可以帮助你的方式：

希望有所帮助。

Answer 3

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

Answer 4

如何使用CSS淡化边框：

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

为说明起见，请原谅内联样式。边框图像的1属性是border-image-slice，在这种情况下，将边框定义为单个连续区域。

来源：Gradient Borders

Answer 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>

Answer 6

为了淡化边框，我使用了 box-shadow CSS 属性

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

CSS中的“淡化”边框

6 个答案: