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浏览器盒阴影插图支持

回答

相关问题