Safari框阴影插入支持 [英] Safari box shadow inset support

问题描述

我在其中一个网站上有一个包含这些资源的方块：

I have a box in one of my websites that has a these property:

-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。我不能使用图像为此，因为这个框的高度为每种情况改变。

This gives the box a nice gradient towards the center. However, Safari does not support the "inset" property and IE doesn't support box-shadow at all. I can't use an image for this because the height of this box changes for each situation.

我不想使用3张图片（一个用于顶部，一个用于中间，另一个用于底部），因为这可能会变得很杂乱码。

I don't want to use 3 images, (one for the top, a repeating one for the middle and one for the bottom), as this can get very messy code.

所以我要问的是，是否有任何方式在所有浏览器中产生框阴影。

So what I'm asking is if there is any way to produce the box shadow in all browsers.

编辑：任何人都知道一些JavaScript代码段可能会这样做？只是想知道...

Anybody know of some javascript snippet that could possibly do this? Just wondering...

推荐答案

最新的Webkit构建（可能还有很多）支持 。

The latest Webkit build (and probably many before) has support for inset. It will probably get to Safari for the next release.

但是，您无法在所有浏览器上执行此操作，图像技巧。 Internet Explorer不会与您进行协作。

However, you won't be able to do it on all browsers without the three images trick. Internet Explorer's not going to collaborate with you otherwise.

话虽如此，我不认为您的目标应该是在所有浏览器中获得相同的结果。我认为你应该在所有浏览器得到体面的结果，但正常的Safari或Firefox浏览器的网页看起来比在Internet Explorer 7更好。此外，只有网络极客比较不同浏览器的网页呈现。

That being said, I don't think your goal should be to get identical results in all browsers. I think you should get decent results in all browsers, but it's normal that web pages in Safari or Firefox look better than in Internet Explorer 7. Besides, only web geeks compare web page rendering across different browsers.

这篇关于Safari框阴影插入支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！