2

我刚刚遇到了盒子阴影的问题。

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？

4

4 回答 4

5

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

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

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

于 2015-05-12T12:38:44.157 回答
1

这是基于浏览器的，-moz-box-shadow特别是用于 Mozilla，就像-webkitbox-shadowchrome 一样。

于 2015-05-12T12:39:08.410 回答
0

像这样使用：参考

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

在编写 CSS3 属性时，现代智慧是最后列出“真实”属性，然后列出供应商前缀。所以不建议以这种方式使用

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-

于 2015-05-12T12:38:09.300 回答
0

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

-moz- : Mozila Firefox, -webkit- :Chrome, safari -ms- : IE -o-: 歌剧,

通过使用它，我们可以将不同的 css 属性应用于不同的浏览器。

于 2015-05-12T12:41:36.253 回答