不同浏览器的box shadow是否有优先级？ (CSS)

Question

我刚刚遇到了box shadow的问题

1. box-shadow有没有优先级？

例如：

box-shadow: 0px 1px 1px 0px #292929;
-moz-box-shadow: 0px 1px 1px 0px #292929;
-webkit-box-shadow: 0px 1px 1px 0px #292929;

和

-moz-box-shadow: 0px 1px 1px 0px #292929;
-webkit-box-shadow: 0px 1px 1px 0px #292929;
box-shadow: 0px 1px 1px 0px #292929;

我看到很多像第二个这样的设置，为什么总是"moz->webkit->basic setting"？

2。为什么我们需要 -moz-box-shadow 和 -webkit-box-shadow 即使我们有 box-shadow？

Answer 1

这样使用：Reference

-webkit-box-shadow:10px 10px 5px #000;
-moz-box-shadow:10px 10px 5px #000;
box-shadow:10px 10px 5px #000;

在写CSS3属性时，现代智慧是把"real"放在最后，属性放在最后，供应商前缀放在前面。所以不建议这样使用

box-shadow: 0px 1px 1px 0px #292929;
-moz-box-shadow: 0px 1px 1px 0px #292929;
-webkitbox-shadow: 0px 1px 1px 0px #292929;

Firefox 3.6- 需要 -moz-。从 4 开始，无前缀就可以了。

Chrome, iOS 3.x, Safari 4- 需要 -webkit-

Answer 2

先回答你的第二个问题；您希望浏览器支持多远将决定您是否需要前缀属性以及使用哪些前缀。（您可以在 caniuse.com 上检查 box-shadow 的浏览器兼容性 table。）

关于订单；前缀属性的顺序无关紧要（就个人而言，我更喜欢字母顺序），因为浏览器会简单地忽略任何它不理解的属性。

唯一重要的是 un 前缀属性必须最后，如果它是后跟浏览器理解的前缀版本，该前缀版本将覆盖无前缀版本，如果前缀版本使用非标准语法，这可能会导致问题。

Answer 3

这是基于浏览器的，-moz-box-shadow专门用于mozilla，如-webkitbox-shadow用于chrome。

Answer 4

为了在所有浏览器中支持一些 css3 我们需要添加前缀

-moz- : Mozila Firefox, -webkit- :Chrome, 野生动物园 -ms- : 浏览器 -o-：歌剧，

通过使用这个我们可以将不同的 css 属性应用到不同的浏览器。

Is there priority for box shadow of different browsers? (CSS)