css - 跨浏览器 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)

}