CSS CSS中的“淡化”边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4520943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Fade" borders in CSS
提问by john2x
I'm using border-left: grooveon an element but I want the border to "fade" into the background as it's about to end at the bottom.
我border-left: groove在一个元素上使用，但我希望边框“淡化”到背景中，因为它即将在底部结束。
I hope I'm making sense. How would I achieve something to that effect?
我希望我说得有道理。我将如何实现这种效果？
采纳答案by Spudley
You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.
在CSS3中，你可以在某些情况下为颜色指定渐变，当然边框可以设置为一种颜色，所以你应该可以使用渐变作为边框颜色。这将包括指定透明颜色的选项，这意味着您应该能够实现您想要的效果。
However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.
但是，我从未见过它被使用过，我不知道当前浏览器对它的支持程度如何。您当然需要接受，至少您的一些用户将无法看到它。
A quick google turned up these two pages which should help you on your way:
一个快速的谷歌打开了这两个页面，它应该可以帮助你：
Hope that helps.
希望有帮助。
回答by daniel.tosaba
You could also use box-shadowproperty with higher value of blur and rgba()color to set opacity level.
Sounds like a better choice in your case.
您还可以使用box-shadow具有更高模糊和rgba()颜色值的属性来设置不透明度级别。在您的情况下，这听起来像是一个更好的选择。
box-shadow: 0 30px 40px rgba(0,0,0,.1);
回答by stackunderflow
How to fade borders with CSS:
如何使用 CSS 淡化边框：
<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>
<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>
Please excuse the inline styles for the sake of demonstration. The 1 property for the border-image is border-image-slice, and in this case defines the border as a single continuous region.
为了演示，请原谅内联样式。边框图像的 1 属性是边框图像切片，在这种情况下，将边框定义为单个连续区域。
Source: Gradient Borders
来源：渐变边框
回答by Luzan Baral
Add this classcssto your style sheet
将此添加classcss到您的样式表
.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;
}
set widthto the widthof your image. and use this htmlfor image
设置width为width您的图像。并将其html用于图像
<div class="border_gradient">
<img src="image.png" />
</div>
though it may not give the same exact border, it will some gradient looks on the border.
虽然它可能不会给出完全相同的边框，但它会在边框上看起来有些渐变。
source: CSS3 Borders
来源：CSS3 边框
