Css漸變邊框顏色

我想向我的網頁邊框添加漸變顏色以及框陰影，它目前在Firefox中正常工作，但無法在Chrome或I.E中使用。Css漸變邊框顏色

有誰知道我在做什麼錯？

謝謝您的高級。

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

來源

2016-01-03 Nrodgers1987

由於物業-moz-border-xxxx-colors只有Firefox支持加入WebKit的/非FF前綴不會讓它通過其他瀏覽器

MDN Reference

支持
此功能是非標準的，不在標準軌道上。不要在面向Web的生產站點上使用它：它不適用於每個用戶。實現之間也可能存在很大的不兼容性，並且行爲在未來可能會發生變化。

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

此房產不是任何規格的一部分。

來源

2016-01-03 00:19:20

Webkit broswers不支持線性漸變（據我所知，無法達到徑向）邊界。但是，有辦法可以在所有瀏覽器中實現非常相似和更可靠的事情。

的box-shadow

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

如果你工作的深度正確，你會得到它的陰影淡出的效果給出了一個漸變的印象。

BORDER INSET/OUTSET

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

這給你的徑向梯度的類似的效果。是的，這是非常相似的，但它沒有一個跨瀏覽器的用戶界面。

編輯 -

這裏是什麼，我在Firefox代碼中看到，現在在所有的瀏覽器工作的一個版本。在Firefox中打開以查看相似性，在Chrome中打開以查看它在那裏工作。

爲了添加背影，您可能需要嵌套兩個div以對每個應用邊框陰影。所有這三個例子證明了我的演示

CODEPEN

來源

2016-01-03 00:21:48 LOTUSMS

* Webkit的broswers不支持線性漸變...爲邊界* - 我不知道你的意思，只是說WebKit瀏覽器做支持漸變色邊框時與'border-image'一起使用。 – Harry

Css漸變邊框顏色

回答

相關問題