2

我想使用 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 的解决方案。

4

4 回答 4

4

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 库才能使其正常工作。

于 2010-03-11T05:48:38.953 回答
3

这不会涵盖所有场景，我认为它在 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 */
}

测试结果

显然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——通过（阴影）
  • Opera 10——失败
于 2010-01-11T20:57:12.803 回答
3

以 Gaby 所说的话为基础，不仅没有实现这一目标的好方法，而且与渐进增强的想法背道而驰。

以下是考虑不做你提议的事情的几个原因：

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

希望这会有所帮助。

于 2010-01-11T21:34:00.563 回答
1

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

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

于 2010-01-11T20:57:51.650 回答