盒子阴影的逐步增强

Question

我想将Webkit的框Shadow CSS属性用于一些下拉。代码看起来像：

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

但是，对于没有此功能的浏览器，我想使用边界来近似此下降阴影，例如：

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}

问题是，我不希望基于边界的阴影出现在支持盒子阴影的浏览器上。我想避免浏览器嗅探，因为我认为很难涵盖所有情况。最简单的方法是什么？我更喜欢无JavaScript的解决方案，但我也会考虑简单的基于JavaScript的解决方案。

Answer 1

现代化 确实特征检测。代码是：

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.boxshadow .drop_down{
  border: 0px none;
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

您需要包括现代javascript库才能正常工作。

Answer 2

这不会覆盖 全部 场景，我认为它在歌剧中失败了，但我会这样做：

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  -moz-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
  border: solid 1px #bbb;
  border: solid 0px rgba(0,0,0,0); /* Ignored by browsers that don't support it */
}

试验结果

显然 rgba 是在Firefox 3.0中引入的，但是 -moz-box-shadow 在3.5中引入。因此，Firefox 3.0未能通过测试。这是我们到目前为止所在的地方：

测试页面

• Firefox 2.0-通行证（灰色1PX线）
• Firefox 3.0-失败
• Firefox 3.5-通行证（阴影）
• Internet Explorer 6.0-通行证（灰色1PX线）
• Internet Explorer 7.0-通行证（灰色1PX线）
• Internet Explorer 8.0-通行证（灰色1PX线）
• Safari 3.0-通行证（阴影）
• Safari 4.0-通行证（阴影）
• Chrome 3.0-通行证（阴影）
• 歌剧10-失败

Answer 3

建立了Gaby所说的话，不仅没有一个好方法可以实现这一目标，而且还违背了进步的增强想法。

这是考虑的一些原因 不是 做您建议的事情：

1. 这些边界将在具有适当框型号的任何浏览器中为您的元素增加宽度。如果您不打算增加宽度，这可能会导致诸如浮动元素被撞到新线路上的问题。
2. 渐进式增强是关于以添加的方式构建的。创建“替代”条件样式正在诱使头痛以进行维护。
3. 如果您选择吸引人的边界风格，它们实际上可能会看起来 更好的 阴影时。我发现这在许多项目中是正确的。阴影确实使边界以吸引人的方式脱颖而出。

希望这会有所帮助。

Answer 4

无需为每个浏览器使用特定技巧即可做到这一点...

IE有条件的评论（因为我认为现在只有IE不支持某些版本的盒子阴影..）或CSS Hacks ..