Question

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

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;

我看到许多设置像第二个，为什么它始终＆＃34; moz-＆gt; webkit-＆gt;基本设置＆＃34;？

2。即使我们有盒子阴影，为什么我们需要-moz-box-shadow和-webkit-box-shadow？

Answer 1

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

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

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

Answer 2

这是基于浏览器，-moz-box-shadow特别用于mozilla，就像明智的-webkitbox-shadow用于Chrome。

Answer 3

使用如下： Reference

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

在编写CSS3属性时，现代智慧是列出＆＃34;真实＆＃34;属性最后和供应商前缀首先..所以不建议以这种方式使用

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 4

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

-moz-：Mozila Firefox， -webkit-：Chrome，safari -ms-：IE -o-：opera，

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