css - 为什么 CSS 属性在 Chrome、FF、Opera 中有不同的名称？

Question

我想要一个名为“shadow”的 div 下面的阴影:

#shadow { box-shadow: 1px 1px 1px #000 };

完成了吗？

完全没有。它只在一个浏览器中工作。猜猜是哪一个。

对于 FF/Chrome 我必须添加不太直观的:

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

现在一切正常。该方案适用于许多 CSS 属性。为什么？

幸好没有 -webkit-border、moz-font 或 -ie-backgroundcolor。

附言。是的，关于 IE 只字未提。称其为浏览器就像将轮椅与摩德纳汽车进行比较。

PS 2. 为什么我的帖子下面的谷歌浏览器标签旁边有一个标志？或者为什么没有 Opera 和 FF 的 Logo ？

Answer 1

发生这种情况是因为浏览器不希望彼此发生冲突。除此之外，目前还没有真正的 box-shadow 的“规范”，所以一些浏览器有自己的实现。

This approach allows any vendor-specific extension to coexist with any future (or current) CSS properties without causing conflicts because, according to the W3C specifications, a CSS property name will never begin with a dash or an underscore:

来源:http://reference.sitepoint.com/css/vendorspecific