CSS 底部渐变边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12878649/
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
Bottom Gradient Border
提问by henryaaron
According to CSS Tricks, the following CSS syntax would result in left border gradient.
根据CSS Tricks，以下 CSS 语法将导致左边框渐变。
.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image:
-webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
}
I'm trying to get the border gradient on the bottom of the element.
我正在尝试获取元素底部的边框渐变。
I tried changing this
我试着改变这个
border-width:3px 0 3px 3px;
to this
对此
border-width:0 0 3px 0;
this
这个
border-width:0 3px 3px 3px;
And it doesn't work, can anybody help me with getting that bottom border to work?
它不起作用，有人可以帮助我让底部边框起作用吗？
You may need a WebKit browser to do this.
您可能需要一个 WebKit 浏览器来执行此操作。
Here would be a fiddle for one to work with; http://jsfiddle.net/HsTcf/
这将是一个可供使用的小提琴；http://jsfiddle.net/HsTcf/
Thanks.
谢谢。
回答by u?nb??s
border-width: 0 0 3px 0;
is correct.
是正确的。
However, the following changed needed to be made:
但是，需要进行以下更改：
... -gradient(right, ...
needed to be changed to
需要改为
... -gradient(top, ...
and 1 100%;to 100% 1;.
并1 100%;到100% 1;。
Demo: jsfiddle.net/HsTcf/3
回答by eidetmp
Here is another way that works for bottom borders. This is the complete class declaration from a site example.
这是另一种适用于底部边框的方法。这是来自站点示例的完整类声明。
#header_bg {
position: fixed;
top: 0px;
width: 100%;
height: 121px;
top: 0px;
background-color: #fff;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
z-index: 10;
}<div id="header_bg"></div>I am assuming above you are trying to make a fixed header. The most important part of course is the box-shadow property. This will work in most modern browsers as well.
我在上面假设您正在尝试制作固定标题。当然，最重要的部分是 box-shadow 属性。这也适用于大多数现代浏览器。
