webkit ,
what is the difference between -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow in CSS?
My CSS is like this:
button:hover {
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
-khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
-o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
There are no immediate differences, it's a vendor prefix in order to tell the different browsers how to interpret, in this case, the property box-shadow . This is done since the different browsers could possibly implement it differently.
The vendor prefixes also allows you to use experimental features or not finalised features.
There is no difference. These are vendor prefixes, used for support .
When the CSS spec isn't finalized, vendors (browser makers) add prefixes to the CSS rules. It's supposed to prevent problems with the spec changing and incompatibility issues. (not that it actually does, it's just an annoyance)
Caniuse (a great resource) has compatibility tables on CSS features. For box-shadow, old Safari and Chrome use -webkit- , while old FF uses -moz- . The -o- and -khtml- prefixes don't seem to be necessary.
BTW, even if there is no browser support (there is in your case), you should add the standards-compliant rule:
button:hover {
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
-moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
}
There is no difference. These are CSS vendor prefixes or CSS browser prefixe
It's a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn't been finalized.
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
Reference
链接地址: http://www.djcxy.com/p/75662.html上一篇: flex和display：flex
下一篇: webkit，