Question

这不是一个问题，而只是一个咆哮。或者也许是一个问题...或者我对盒子阴影不太了解..

为了在不同的浏览器中使用CSS3中的框阴影，这里我要做的是：

-webkit-box-shadow: 0px 0px 10px #676767;
-moz-box-shadow: 0px 0px 10px #676767;
box-shadow: 0px 0px 10px #676767;

为了让Firefox，Opera和Safari / Chrome / Webkit工作，有没有其他人发现这种令人难以置信的愚蠢行为？它根本不会在IE中运行！

我有什么办法可以减少重复的CSS值吗？

谢谢， badallen

Answer 1

由于尚未正式指定box-shadow，因此您需要特定于供应商的前缀（例如：-moz，-webkit，-ms）。 IE不支持他们期间;如果你想使用IE，我建议使用CSS3 PIE。 PIE还增加了对其他CSS 3眼睛糖果的支持，如border-radius和渐变。

如果你想避免每次都写相同的代码，我建议使用LESS或SASS及其mixins：

http://lesscss.org/
http://sass-lang.com/

Answer 2

请注意as of 2010-09-14，已删除Mozilla Platform版本的-moz前缀。 Firefox 4将完全支持box-shadow！

Answer 3

不幸但不可避免地，这就是制定标准的方式：

指定了部分标准。（通常只有一个浏览器制造者在内部。）
一家或多家公司在浏览器中实施该部分。
该标准是根据目前实施的标准的实际使用情况进行修订的。

关键部分是3 - 如果没有使用供应商前缀，第3部分就不会发生，所以如果没有世界上每个Web开发人员的痛苦，就无法纠正错误。（例如，参见Internet Explorer盒子模型，Internet Explorer 6的浮动实现的bug的大鼠巢，以及几乎整个版本8的Internet Explorer的整个历史。）

在某些时候，需要box-shadow的供应商前缀的浏览器将不受欢迎，您可以跳过-webkit-box-shadow和-moz-box-shadow。在那之前，它只是你使用尖端CSS功能所付出的代价。

Answer 4

只需添加带有以下CSS的框

box-shadow: 0 3px 30px rgba(0, 0, 0, 0.3);

CSS中的Box Shadows

4 个答案: