CSS漸變邊框顏色

Question

我正在嘗試向網頁的邊框以及框陰影添加漸變色，它目前在Firefox中可以正常工作，但在Chrome或IE中無法正常工作

有人知道我在做什么錯嗎？

謝謝您的進階。

這是我的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

因為-moz-border-xxxx-colors屬性僅受Firefox支持，所以添加webkit / non-FF前綴將使其不被其他瀏覽器支持

MDN參考

此功能是非標准的，不在標准軌道上。 請勿在面向Web的生產站點上使用它：它不適用於每個用戶。 實現之間也可能存在很大的不兼容性，並且將來的行為可能會更改。

在Firefox之類的Mozilla應用程序中，-moz-border-left-colors CSS屬性設置左邊框的顏色列表。

此屬性不是任何規范的一部分。

Answer 2

Webkit瀏覽器不支持邊界的線性漸變（據我所知，徑向漸變也不是）。 但是，有一些方法可以在所有瀏覽器中實現非常相似且更可靠的功能。

影棚

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

如果您正確地操作深度，則陰影的淡入效果會給人以漸變的感覺，從而獲得效果。

邊界輸入/輸出

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

這給您與徑向漸變類似的效果。 是的，這是非常相似的，但是比沒有跨瀏覽器的UI更勝一籌。

編輯-

這是我從Firefox中的代碼中看到的版本，現在可以在所有瀏覽器中使用。 在Firefox中打開以查看相似性，在Chrome中打開以查看它也可以正常工作。

為了添加后陰影，您可能需要嵌套兩個div才能對每個陰影應用邊框陰影。 我的演示中展示了所有三個示例

CODEPEN