跨浏览器 CSS 边框渐变答案

【问题标题】：Cross browser CSS border gradient跨浏览器 CSS 边框渐变
【发布时间】：2013-11-12 16:39:02
【问题描述】：

很长一段时间以来，我一直试图找到解决方案，但没有成功。希望身边的人能帮帮我。

我已经明白我需要使用 -webkit、-moz 等才能让它跨浏览器工作。

我已经成功找到了正确的 -moz 语法，但是我找不到对应的 -webkit 语法。

另外，我注意到很多人更喜欢背景渐变，但我无法重现下面的内容，即使使用背景渐变生成器也是如此。

我说的边框渐变如下：

-moz-border-left-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
-moz-border-right-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;

网站将如下所示：http://postimg.org/image/qeonchwpd/

请忽略该屏幕截图中可以看到的其他错误，因为我可以轻松修复这些错误。这只是我无法工作的边框渐变。

如您所见，我并不是要在一个小盒子周围设置渐变边框，而是要在整个页面的左右两侧设置渐变边框！渐变从黑色慢慢变为白色，然后再变为黑色。

谁能帮助我让它在 -webkit 浏览器和其他浏览器中工作？建议让它看起来比屏幕截图更好！

提前非常感谢！

【问题讨论】：

所以你所追求的只是主 div 的左右边界从白色变为黑色......对吗？

标签： css cross-browser web border gradient

【解决方案1】：

我没有听说过-webkit-border-left-colors。我只见过border-left-color。

语法border-left-color 可以在chrome 中工作，它是一个webkit 浏览器。您不需要附加 -webkit。

-moz-border-left-colors: 是仅适用于 mozilla 浏览器的属性。所以没有 webkit 替代品。检查小提琴http://jsfiddle.net/aWXmr/

编辑：有一些替代方法可以做到这一点。您可能想查看this question 以了解使用 CSS3 的可能解决方案

【讨论】：

【解决方案2】：

也许你应该完全放弃使用边框，考虑整个 div 的背景渐变。

如果您将 div 设置为具有填充（例如 6%），您可以从左到右应用线性渐变（或以其他方式返回...没关系），颜色停止在填充完成之前结束.

JSFiddle Demo

HTML

<div class="main"> Any content  </div>

CSS

.main {
    width:75%; /* not required */
    margin:0 auto; /* not required */
    height:1000px; /* not required */
    color:white; /* not required */

    /* the important bits */

    background:linear-gradient(to right, black, white 5%, black 5%, black 95%, white 95%, black);
    padding:6%; ?just a little more than the color stop values)

}

【讨论】：