我在一个元素上使用了
border-left: groove
,但我希望边框在接近底部结束时“淡出”到背景中。我希望自己说得清楚。我该如何实现这样的效果?border-left: groove
,但我希望边框在接近底部结束时“淡出”到背景中。我希望自己说得清楚。我该如何实现这样的效果?box-shadow
属性,增加模糊值和使用rgba()
颜色来设置透明度。在你的情况下,这听起来更合适。box-shadow: 0 30px 40px rgba(0,0,0,.1);
box-shadow: 0 30px 40px 40px rgba(0,0,0,.1);
,请参见 https://conceptboard.github.io/box-shadow-spread-examples/。 - klues当你为不同的边框提供不同的参数时,浏览器会尽力并以某种方式进行插值。您可以利用这种行为来生成特定的渐变边框,例如此示例:
https://codepen.io/dkellner/pen/rNpJwyB
.your-element {
border:1px solid black;
border-left:150px solid transparent;
border-right:150px solid transparent;
}
虽然这不完全是操作员想要的,但在许多情况下已经足够了。而且看起来很酷。 在示例中,您将看到另一个版本,其中1px
边框被替换为3px
,产生了另一个酷效果,就像用笔绘制一样。
对于渐变边框,我使用box-shadow CSS属性
.box{
box-shadow: inset 0 0 10px #311b0b;
}
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>
我知道这已经过时了,但在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>