Question

我尝试将渐变颜色添加到我的网页边框以及一个方框阴影，它目前在Firefox中正常工作但在Chrome或I.E中无效。

有谁知道我做错了什么？

感谢高级。

这是我的Css：

#bodywrapper {
width:1000px;
background-color:#b69d85;
float:left;
box-shadow: 10px 10px 15px #111111;
border-left: 8px solid #000;
    -webkit-border-left-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
    -moz-border-left-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
border-top: 8px solid #000;
    -webkit-border-top-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
    -moz-border-top-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
border-bottom: 8px solid #000;
    -webkit-border-bottom-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
    -moz-border-bottom-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
border-right: 8px solid #000;
    -webkit-border-right-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
    -moz-border-right-colors: #665546 #73604f #84705d #84705d #97826d #97826d #aa927c #b69d85;
padding:0px 0px 0px 0px;
}

Answer 1

因为只有Firefox支持属性-moz-border-xxxx-colors，所以添加webkit /非FF前缀不会使其受其他浏览器的支持

MDN Reference

此功能不合标准，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

在Firefox等Mozilla应用程序中，-moz-border-left-colors CSS属性设置左边框的颜色列表。

此属性不属于任何规范。

Answer 2

对于边框，Webkit broswers不支持线性渐变（我不知道是否为径向渐变）。但是，有很多方法可以在所有浏览器中实现非常相似且更可靠的东西。

<强>箱阴影

.box{
   box-shadow: 10px 10px 5px #888888;
}

如果你正确地处理了深度，你会得到它的效果，因为阴影的淡化会给人一种渐变的印象。

BORDER INSET / OUTSET

.box{
    border: 2px inset #888888;
}

这为您提供了与径向渐变相似的效果。是的，这是一个很大的相似之处，但它没有跨浏览器UI。

编辑 -

以下是我在Firefox中的代码中看到的版本，现在可以在所有浏览器中使用。在Firefox中打开以查看相似性，在Chrome中打开以查看它在那里工作。

为了添加背影，您可能需要嵌套两个div以对每个div应用边框阴影。我的演示

中演示了所有这三个示例

CODEPEN

Css渐变边框颜色

2 个答案: