CSS中的盒子阴影答案

【问题标题】：Box Shadows in CSSCSS中的盒子阴影
【发布时间】：2011-04-12 09:36:18
【问题描述】：

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

为了在不同的浏览器中使用 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 值吗？

谢谢，巴达伦

【问题讨论】：

我同意它的使用是难以置信的复杂，但它仍然比没有任何阴影要好。关于这个问题很好的讨论here
很有希望他们会停止这样做（&$%#*!@，但唉，这不是故意的。
@Pekka — 哦，是的，我认为 Bobince 做到了：stackoverflow.com/questions/3218795/…

标签： internet-explorer firefox google-chrome css

【解决方案1】：

只需添加一个带有以下 css 的框

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

【讨论】：

【解决方案2】：

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

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

关键部分是第 3 部分——如果不使用供应商前缀，第 3 部分就不会发生，因此对于世界上的每个 Web 开发人员来说，如果没有很多痛苦，就无法纠正错误。（参见例如 Internet Explorer 盒子模型、Internet Explorer 6 的浮动实现的老鼠巢穴，以及直到版本 8 为止的 Internet Explorer 的几乎整个历史。）

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

【讨论】：

Eric Meyer 在 A List Apart 上有一篇有趣的文章，关于 CSS 的实现、供应商前缀等：alistapart.com/articles/prefix-or-posthack
@David：哦，是的，这很棒。我怀疑我的回答只是糟糕地总结了我对那篇文章的记忆。

【解决方案3】：

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

【讨论】：

【解决方案4】：

因为box-shadow 尚未正式指定，您需要供应商特定的前缀（例如：-moz、-webkit、-ms）。 IE 不支持它们；如果你想使用 IE，我建议使用 CSS3 PIE。 PIE 还增加了对其他 CSS 3 视觉效果的支持，例如 border-radius 和渐变。

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

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

【讨论】：