Question

我想使用WebKit的box-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;
}

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

Answer 1

Modernizr会进行特征检测。代码是：

.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;
}

您需要包含modernizr javascript库才能实现此目的。

Answer 2

这不会涵盖所有场景，我认为它在Opera中失败了，但我会这样做：

.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 */
}

测试结果

显然{Firefox}引入了rgba，但3.5中引入了-moz-box-shadow。因此，Firefox 3.0未通过测试。以下是我们到目前为止所处的位置：

Test Page

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 - 通过（影子）
Opera 10 - 失败

Answer 3

建立盖比所说的，不仅没有一种好方法可以实现这一目标，而且还违背了渐进式增强的想法。

以下几个理由可以考虑不做你提出的建议：

这些边框将在具有适当框模型的任何浏览器中为元素添加宽度。如果您不计划增加的宽度，这可能会导致浮动元素碰到新行等问题。
渐进式增强是以附加的方式建立起来的。创建“替代”条件样式会引发令人头疼的维护。
如果您选择吸引人的边框样式，它们实际上可能在阴影时看起来更好。我发现在许多项目中都是如此。阴影确实使边界以一种吸引人的方式脱颖而出。

希望这有帮助。

Answer 4

如果不为每个浏览器使用特定的技巧，就没有简单的方法...

无论是IE条件评论（因为我认为只有IE现在不支持某些版本的box-shadow ..）或css hacks ..

使用box-shadow进行渐进增强

4 个答案: