Question

我的某个网站中有一个包含这些属性的框：

-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片段吗？只是想知道...

Answer 1

最新的Webkit构建（可能之前很多）都支持inset。它可能会在下一个版本中访问Safari。

但是，如果没有三个图像技巧，您将无法在所有浏览器上执行此操作。否则，Internet Explorer不会与您合作。

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

Answer 2

商定;说实话，我毫不犹豫地让我的网页在Internet Explorer上看起来比高级浏览器看起来更笨拙。内容仍然是可读的，可访问的和可导航的：但是在浏览器之间使用它可以实现像素完美。如果有的话，它只会让微软更有动力去改进浏览器对CSS3的支持。

就我个人而言，我认为inset标志是盒阴影所承诺的最棒的功能之一......除了给元素一个凹陷的“剪切”效果外，还可以使用插入阴影创建发光边缘和角度阴影，使用直线背景渐变（特别是圆边）不能轻易实现的效果。能够插入阴影为网页设计提供了大量的机会。

知道Safari不支持它让我担心它可能会在某些时候从规范中删除：上帝知道没有理由放弃这么有用的东西。＆GT; _＆GT;

Answer 3

inset Safari 5.0支持

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

Answer 4

使用径向渐变的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))
    );
}

Safari box阴影插入支持

4 个答案: