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％），你可以从左到右（或者反过来......这没关系）应用一个linaer渐变，颜色停止在填充完成之前结束

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。

语法border-left-color将在chrome（webkit浏览器）中使用。您不需要附加-webkit。

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

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

跨浏览器CSS边框渐变

2 个答案: