底部渐变边框答案

【问题标题】：Bottom Gradient Border底部渐变边框
【发布时间】：2012-10-14 01:52:45
【问题描述】：

根据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%;   
}

我正在尝试获取元素底部的边框渐变。

我尝试改变这个

    border-width:3px 0 3px 3px;

到这里

border-width:0 0 3px 0;

这个

border-width:0 3px 3px 3px;

它不起作用，谁能帮我让底部边框起作用？

您可能需要一个 WebKit 浏览器来执行此操作。

这将是一个供人使用的小提琴； http://jsfiddle.net/HsTcf/

谢谢。

【问题讨论】：

标签： gradient css

【解决方案1】：

border-width: 0 0 3px 0;

是正确的。

但是，需要进行以下更改：

... -gradient(right, ...

需要改成

... -gradient(top, ...

和1 100%; 到100% 1;。

演示：jsfiddle.net/HsTcf/3

【讨论】：

【解决方案2】：

这是另一种适用于底部边框的方法。这是来自站点示例的完整类声明。

#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;
}

&lt;div id="header_bg"&gt;&lt;/div&gt;

我在上面假设您正在尝试制作一个固定的标题。最重要的部分当然是 box-shadow 属性。这也适用于大多数现代浏览器。

【讨论】：