Home > Developer > Web Develop
Every time you use Box-shadow, you have to consult the data to achieve the corresponding effect, now summed up, convenient to view later.
First, the syntax:
E {box-shadow:inset x-offset y-offset blur-radius Spread-radius color};
E {box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color};
Second, value:
1. Shadow type: This parameter is optional, the default projection method is outer shadow, if its unique value "inset", is to turn the outer shadow into inner shadow;
2.x-offset: Refers to the shadow horizontal offset, the value can be positive negative, positive, the shadow on the right side of the object, negative value, the shadow on the left side of the object;
3. Y-offset: Refers to the vertical offset of the shadow, its value can also be positive negative, positive, shadow at the bottom of the object, negative values, the shadow at the top of the object;
4. Shadow Blur Radius: This parameter is optional, can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow edge is more blurred;
5. Shadow expansion radius: This parameter is optional, its value can be positive and negative, positive, then the entire shadow is extended, or vice versa, it shrinks
6. Shadow color: This parameter is optional, do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is, transparent, it is recommended not to omit this parameter.
Third, compatible browser of the wording :
firefox4.0-
-moz-box-shadow: projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;
Safari and Google chrome10.0-
-webkit-box-shadow: projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;
firefox4.0+, Google Chrome 10.0+, oprea10.5+ and IE9
Box-shadow: projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;
Box-shadow and Text-shadow can use one or more projections, and if multiple projections are used, they must be separated by a comma ",".
Four,IE filter simulation Box-shadow shadow effect
Basic syntax: Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (value));
Note :
1. The filter must be used in conjunction with the Background property, otherwise the filter fails;
2. The color attribute in the filter must be complete and not abbreviated;
3. The shadow of the filter is calculated within the width of the height;
4. In the box shadow, box will automatically add Overflow:hidden;
For more information about IE filters, refer to Http://blog.sina.com.cn/s/blog_4c1e6a010101fvgw.html
The above blog post, referring to http://blog.csdn.net/freshlover/article/details/7610269 and Http://www.w3cplus.com/content/css3-box-shadow
the implementation Code of common Shadow :
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>The use of Box-shadow</title> <styletype= "Text/css">Div{width:60px;Height:60px;margin:40px Auto;Background-color:Grey; } /*Lower Right Shadow*/. Box-shadow-1{-webkit-box-shadow:3px 3px 3px;-moz-box-shadow:3px 3px 3px;Box-shadow:3px 3px 3px; } /*Four- sided shadow with color*/. Box-shadow-2{-webkit-box-shadow:0 0 10px #0CC;-moz-box-shadow:0 0 10px #0CC;Box-shadow:0 0 10px #0CC; } /*Four- sided shadow expansion with same color*/. box-shadow-3{-webkit-box-shadow:0 0 10px 15px #0CC;-moz-box-shadow:0 0 10px 15px #0CC;Box-shadow:0 0 10px 15px #0CC; } /*Four- sided color inner shadow*/. Box-shadow-4{-webkit-box-shadow:inset 0 0 10px #0CC;-moz-box-shadow:inset 0 0 10px #0CC;Box-shadow:inset 0 0 10px #0CC; } /*Four- sided color outer shadow*/. Box-shadow-5{Box-shadow:-10px 0 10px Red,/*left Shadow*/10px 0 10px Yellow,/*Right Shadow*/0-10px 10px Blue,/*Top Shadow*/0 10px 10px Green; /*Bottom Shadow*/ } /*overlay A different color shadow*/. Box-shadow-6{Box-shadow:0 0 10px 5px Black, 0 0 10px 20px Red; } /*class Border Border effect (only set shadow expansion radius and shadow color)*/. Box-shadow-7{Box-shadow:0 0 0 1px Red; } /*compatible with IE*/. Box-shadow{Filter:Progid:DXImageTransform.Microsoft.Shadow (color= ' #969696 ', direction=135, strength=5);/*For ie6,7,8*/Background-color:#ccc;-moz-box-shadow:2px 2px 5px #969696;/*Firefox*/-webkit-box-shadow:2px 2px 5px #969696;/*WebKit*/Box-shadow:2px 2px 5px #969696;/*Opera or IE9*/ } </style></Head><Body><Divclass= "Box-shadow-1"></Div><Divclass= "Box-shadow-2"></Div><Divclass= "Box-shadow-3"></Div><Divclass= "Box-shadow-4"></Div><Divclass= "Box-shadow-5"></Div><Divclass= "Box-shadow-6"></Div><Divclass= "Box-shadow-7"></Div><Divclass= "Box-shadow"></Div></Body></HTML>
See the specific results:
Use of the Css3box-shadow property
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
