CSS中的盒子阴影

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

- badallen

---

我同意它确实非常复杂，但仍然比根本没有任何盒子阴影要好。这里有关于这个问题的良好讨论：链接。 - Pekka

本来有很大的希望他们能停止这种($&%#*!@)行为，但不幸的是，这并没有实现。 - Joe Mills

@Pekka — 哦，是的，我认为Bobince在这里说得很好：http://stackoverflow.com/questions/3218795/seeking-opinions-on-vendor-specific-prefixes/3218870#3218870 - Paul D. Waite

Answer 1

因为box-shadow尚未正式规定，所以您需要使用供应商特定的前缀（例如：-moz，-webkit，-ms）。IE根本不支持它们；如果您想要使用IE，我建议使用CSS3 PIE。PIE还添加了对其他CSS 3效果的支持，如border-radius和gradients。

如果您想避免每次编写相同的代码，我建议使用LESS或SASS及其mixin： http://lesscss.org/ http://sass-lang.com/

- NullUserException

Answer 2

请注意，截至2010年9月14日，Mozilla平台版本已经移除了-moz前缀。Firefox 4将完全支持box-shadow！

- michaelhanson

Answer 3

遗憾而不可避免的是，标准制定的方式如下：

1. 指定了标准的一部分（通常只由一个浏览器制造商在内部指定）。
2. 一个或多个公司在浏览器中实现了该部分。
3. 根据迄今为止实现的标准的实际使用情况修订标准。

关键部分是第3部分-如果没有使用供应商前缀，则无法进行第3部分，因此错误无法在世界上每个网络开发人员都需付出巨大代价的情况下得以纠正（例如 Internet Explorer 盒模型、Internet Explorer 6 浮动实现中一堆错误、以及基本上直到版本 8 的整个历史）。

在某些时候，需要使用厂商前缀的浏览器将变得不太受欢迎，因此您可以跳过“-webkit-box-shadow”和“-moz-box-shadow”。在那之前，使用最新的 CSS 功能就得付出这个代价。

- Paul D. Waite

---

Eric Meyer在A List Apart上有一篇有趣的文章，关于CSS的实现、供应商前缀等等：http://www.alistapart.com/articles/prefix-or-posthack/ - David Thomas

@David：哦，是的，那篇文章很棒。我猜我的回答只是很糟糕地总结了我对那篇文章的记忆。 - Paul D. Waite

Answer 4

只需添加以下 CSS 样式的框

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

- Jojo Joseph