Safari瀏覽器盒陰影插圖支持

我在我的網站具有這些特性的一個盒子：Safari瀏覽器盒陰影插圖支持

-moz-box-shadow:inset 0 0 50px #ecf4de; 
-webkit-box-shadow:inset 0 0 50px #ecf4de; 
box-shadow:inset 0 0 50px #ecf4de;

這使箱向中心一個不錯的梯度。但是，Safari不支持「inset」屬性，IE根本不支持box-shadow。我無法爲此使用圖像，因爲此框的高度會隨着每種情況而改變。

我不想使用3個圖像（一個用於頂部，一個用於中間，一個用於底部），因爲這可能會變得非常混亂的代碼。

所以我問的是，如果有任何方式在所有瀏覽器中產生箱子陰影。

編輯：任何人都知道一些JavaScript代碼片段，可能會做到這一點？只是想知道...

來源

2010-05-23 codedude

最新的Webkit版本（可能很多之前）支持inset。它可能會在Safari上獲得下一個版本。

但是，您將無法在全部瀏覽器上執行此操作，而無需使用三個圖像技巧。否則Internet Explorer將不會與您協作。

這就是說，我認爲你的目標不應該是在所有瀏覽器中獲得相同的結果。我認爲你應該在所有瀏覽器中獲得不錯的結果，但Safari或Firefox中的網頁比Internet Explorer 7更好是正常的。此外，只有網絡極客比較不同瀏覽器中的網頁渲染。

來源

2010-05-23 01:35:59 zneak

同意;說實話，我毫不猶豫地把我的網頁放在Internet Explorer上看起來比較優秀的瀏覽器上顯得更加明顯和更加嚴格。內容仍然是可讀的，可訪問的和可導航的：但是在瀏覽器之間使它像素完美。如果有的話，它只會給微軟更多的激勵來改善他們對CSS3的瀏覽器支持。

個人而言，我認爲inset標誌是盒子陰影所承諾的最棒的功能之一......除了給元素一個鬱悶的「切除」效果外，還可以使用插入陰影來創建發光邊緣和有角度的陰影，這種效果使用直背景漸變（特別是具有圓形邊緣）不容易實現。能夠插入陰影爲網頁設計提供了大量機會。

知道Safari並不支持它，讓我擔心它可能會在某些時候從規範中被拋棄掉：上帝知道沒有理由放棄那麼有用的東西。 > _>

來源

2010-06-04 05:17:57 Alhadis

inset的Safari 5.0支持

http://www.css3.info/preview/box-shadow/

來源

2011-02-03 08:24:33

您可能有更多的運氣與 '疊置法' 中，第一的Jordon Dobsons's techniques here，它使用徑向梯度。

但它仍然需要圖像的高度和寬度（特別是在Chrome中）。

/* Overlay Method */ 

figure.overlay::after{ 
    position:    absolute; 
    top:     0; 
    bottom:     0; 
    left:     0; 
    right:     0; 
    content:    ""; 
    z-index:    2; 

    pointer-events:   none; /* "all" disables mouse access to image */ 

/* Mozilla Setting */ 
    background-image:  -moz-radial-gradient(
    center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px 
); 

/* Webkit Setting */ 
    background-image:  -webkit-gradient(
    radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)) 
    ); 
}

來源

2011-02-03 09:24:00

Safari瀏覽器盒陰影插圖支持

回答

相關問題