2

很长一段时间以来，我一直试图找到解决方案，但没有成功。希望附近有人可以帮助我。

我已经明白我需要使用 -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/qenchwpd/

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

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

谁能帮助我让它在-webkit浏览器和其他浏览器中工作？让它在屏幕截图中看起来更好的建议也总是很受欢迎！

提前非常感谢！

4

2 回答 2

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)

}
于 2013-11-01T13:29:46.030 回答
0

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

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

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

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

于 2013-11-01T13:20:47.550 回答