跨浏览器 CSS 边框渐变

Question

很长一段时间

以来，我一直在试图找到解决方案，但没有成功。希望这里有人可以帮助我。

我已经明白我需要使用 -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 浏览器中工作，也许还有其他浏览器？在屏幕截图中使其看起来更好的建议也总是值得赞赏的！

提前非常感谢！

Answer 1

也许你应该完全放弃使用边框，而是考虑整个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)
}

Answer 2

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

语法边框左颜色将在 chrome 中工作，这是一个 webkit 浏览器。您不需要附加 -webkit。

-moz-border-left-colors:是仅适用于 Mozilla 浏览器的属性。因此，没有webkit替代方案。检查小提琴 http://jsfiddle.net/aWXmr/

编辑：这样做有几种选择。您可能需要查看此问题以获取使用 CSS3 的可能解决方案