跨浏览器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演示

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 。

语法border-left-color将在Webkit浏览器的chrome中工作。 您不需要附加-webkit。

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

编辑：有几种选择可以做到这一点。 您可能想看一下这个问题 ，以了解使用CSS3的可能解决方案