CSS3 shadow box-shadow usage and tip summary, css3box-shadow
CSS3Shadow demo ToolHttp://www.css88.com/tool/css3Preview/Box-Shadow.html
Text-shadowIs to add a shadow effect to the text, and box-shadow is to add a peripheral shadow effect to the element block. WithHTML5AndCSS3This special effect is becoming more and more common.
Basic syntaxYes {box-shadow: [inset] x-offset y-offset blur-radius spread-radiuscolor}
Object Selector{Box-shadow :[Projection Method] XAxis offsetYAxis offset shadow blur radiusRadius of shadow ExtensionShadow color}
Box-shadowAttribute parameter setting value:
Shadow Type: this parameter is optional. If no value is set, the default projection method is the external shadow. If its unique value is "inset", the projection method is the inner shadow;
X-offset: horizontal shadow offset. The value can be positive or negative. If the value is positive, the shadow is on the right of the object. If the value is negative, the shadow is on the left of the object;
Y-offset: the vertical offset of the Shadow. The value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object, and its value is negative, the shadow is at the top of the object;
Shadow blur radius: this parameter is optional, but its value can only be positive. If its value is 0, it indicates that the shadow has no blur effect, the greater the value, the blurrier the edge of the shadow;
Radius of shadow Extension: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced;
Shadow color: this parameter is optional. If no color is set, the browser will take the default color, but the default color of each browser is inconsistent, especially in the safari and chrome browsers under the webkit kernel, it is black (verified) in Firefox/Opera. We recommend that you do not omit this parameter.
Browser compatibility:
To be compatible with mainstream browsers and support earlier versions of these mainstream browsers, when using the box-shadow attribute on Chrome and Safari browsers Based on Webkit, we need to write the attribute name in the form of-webkit-box-shadow. The Firefox Browser needs to be written in the form of-moz-box-shadow.
. Box-shadow {
// Firefox4.0-
-Moz-box-shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color;
// Safariand Google chrome10.0-
-Webkit-box-shadow: Projection Method 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 Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color;
}
Note: For convenience, only the box-shadow attribute and the-moz-and-webkit-prefixes are written in some aspects of the css attribute in the post. Do not add them in use.
To better understand the features of box-shadow, make a few smallTestTo see the effect:
Related code:
<! DOCTYPE html>
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8" http-equiv = "Content-Type">
<Title> CSS3 attribute: box-shadow test </title>
<Script type = "text/javascript" src = "js/jquery. min. js"> </script>
<Script type = "text/javascript" src = "js/jquery. boxshadow. js"> </script>
<Style type = "text/css">
. Box-shadow-1 {
-Webkit-box-shadow: 3px 3px 3px;
-Moz-box-shadow: 3px 3px 3px;
Box-shadow: 3px 3px 3px;
}
. Box-shadow-2 {
-Webkit-box-shadow: 0 0 10px # 0CC;
-Moz-box-shadow: 0 0 10px # 0CC;
Box-shadow: 0 0 10px # 0CC;
}
. Box-shadow-3 {
-Webkit-box-shadow: 0 0 10px rgba (0,204,204,. 5 );
-Moz-box-shadow: 0 0 10px rgba (0,204,204,. 5 );
Box-shadow: 0 0 10px rgba (0,204,204,. 5 );
}
. Box-shadow-4 {
-Webkit-box-shadow: 0 0 10px 15px # 0CC;
-Moz-box-shadow: 0 0 10px 15px # 0CC;
Box-shadow: 0 0 10px 15px # 0CC;
}
. Box-shadow-5 {
-Webkit-box-shadow: inset 0 0 10px # 0CC;
-Moz-box-shadow: inset 0 0 10px # 0CC;
Box-shadow: inset 0 0 10px # 0CC;
}
. Box-shadow-6 {
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 side shadow */
}
. Box-shadow-7 {
Box-shadow: 0 0 10px 5px black,
0 0 10px 20px red;
}
. Box-shadow-8 {
Box-shadow: 0 0 10px 20px red,
0 0 10px 5px black;
}
. Box-shadow-9 {
Box-shadow: 0 0 0 1px red;
}
. Obj {
Width: 100px;
Height: 100px;
Margin: 50px auto;
Background: # eee;
}
. Outer {
Width: 100px;
Height: 100px;
Border: 1px solid red;
}
. Inner {
Width: 60px;
Height: 60px;
Background-color: red;
-Webkit-box-shadow: 50px 50px blue;
-Moz-box-shadow: 50px 50px blue;
Box-shadow: 50px 50px blue;
}
</Style>
</Head>
<Body>
<Div class = "obj box-shadow-1"> </div>
<Div class = "outer">
<Div class = "inner"> </div>
</Div>
<Div class = "obj box-shadow-2"> </div>
<Div class = "obj box-shadow-3"> </div>
<Div class = "obj box-shadow-4"> </div>
<Div class = "obj box-shadow-5"> </div>
<Div class = "obj box-shadow-6"> </div>
<Div class = "obj box-shadow-7"> </div>
<Div class = "obj box-shadow-8"> </div>
<Div class = "obj box-shadow-9"> </div>
<Script type = "text/javascript">
$ (Document). ready (function (){
If ($. browser. msie ){
$ ('. Obj'). boxShadow (-10,-10, 5, "# 0cc"); // The box-shadow element is used.
}
});
</Script>
</Body>
</Html>
Conclusion:
1) from. the box-shadow-1 effect can be obtained without specifying the attribute shadow color. The shadow is transparent in safari and chrome browsers under the webkit kernel, black in Firefox/Opera.
2) from the comparison between inner and outer of the two div blocks inside and outside, all mainstream browsers that support box-shadow show that the inner shadow breaks through the outer container to display the entire shadow effect. W3C standards read the principles and performance of box-shadow in graphical form:
We can understand: the rounded corner border-radius, the shadow extension radius, the shadow blur radius, and how the padding affects the Object Shadow: border-radius with a non-zero value will affect the shape of the shadow with the same effect, but border-image will not affect any shape of the shadow of the object. The object shadow is the same as that of the box model, the vulva shadow is under the background of the object, and the inner shadow is under the background of the border. We know that the background image is above the background color by default. Therefore, the entire level is: Border> Inner Shadow> background image> background color> outer shadow.
3) from the. box-shadow-2 to. box-shadow-5 results, we can understand the role of the box-shadow value.
. Box-shadow-2 is xy without offset, shadow size 10px, no expansion radius, color # 0CC is rgba (0,204,204, 1), here we use the color HEX value; Effect
The. box-shadow-3 is based on the. box-shadow-2 effect and applies the rgba color value. The advantage is that the alpha transparency effect is added to the box-shadow. Effect:
. Box-shadow-4 adds a shadow extension radius of 15px Based on the. box-shadow-2 effect.
. Box-shadow-5 sets the outer shadow as the inner shadow Based on the. box-shadow-2 effect.
4). A box-shadow-6 element uses multiple shadows, separated by commas. Set the shadow effect for the four sides of the object by changing the positive and negative values of x-offset and y-offset. When x-offset is negative, the left shadow is generated, right shadow is generated when the value is positive, and y-offset is the base shadow generated when the value is positive. The top shadow is generated when the value is negative. Set the Blur radius to 0. If it is not set to 0, the other three sides will also have a shadow. Note This!
Note that this syntax is incorrect: {box-shadow:-10px 0 10px red, box-shadow: 10px 0 10 pxblue, box-shadow: 0-10px 10px yellow, box-shadow: 0 10px 10px green}
A multi-shadow sequence problem is also involved here. When multiple shadow attributes are used for the same element, pay attention to the sequence of these attributes. The shadow written first is displayed at the top layer, as shown in. box-shadow-7 is set to different fuzzy values:
. Box-shadow-7 {
Box-shadow: 0 0 10px 5px black,
0 0 10px 20px red;
}
We can see the effect of the cascade sequence:
Change the two shadow effects as follows:
. Box-shadow-8 {
Box-shadow: 0 0 10px 20px red,
0 0 10px 5px black;
}
Only the Red Shadow effect is displayed. Because the Red Shadow layer is on top, the Blur radius is large, and the black shadow behind it is completely blocked.
The conclusion is: if the Blur value of the shadow is smaller than the Blur value of the shadow, The Blur value of the shadow is greater than the Blur value of the shadow, the Shadow above will cover the shadow effect behind it.
4) border-like border effect (only set the shadow extension radius and shadow color)
. The effects of box-shadow-9 are similar to those of boder: 1px solid red, but the effects of box-shadow are different from those of border in object height, A larger expansion radius than the border height. In addition, the shadow does not affect any layout of the page, which can be confirmed by viewing the layout diagram under firebug.
5)InIeLower SimulationCss3InBox-shadowShadow Effect
Method 1: You can useIEOfShadowFilter
Basic syntax: Filter: progid: DXImageTransform. Microsoft. Shadow (color = 'color value', ction = Shadow angle (numerical value), Strength = Shadow radius (numerical value ));
Note:: The filter must be used with the background attribute; otherwise, the filter becomes invalid.
Simulate the box-shadow (shadow) code in css3 in IE:
. Box-shadow {
Filter: progid: DXImageTransform. Microsoft. Shadow (color = '#969696', Direction = 135, Strength = 5);/* for ie6 */
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 */
}
On Children's Day, I did this:
[Css]View plain copy
Li. blk-item {
Width: 423px;
Height: 229px;
Float: Left;
Padding: 8px;
Margin: 2px 18px 13px 21px;
Display: Inline;
Border: 1px solid # d3c998;
Border-radius: 2px;
Filter: progid: DXImageTransform. Microsoft. Shadow (color = '# d3c998', ction = 135, Strength = 5);/* for ie6 */
Background-color: # Fff;
-Moz-box-shadow: 2px 2px 5px # d3c998;/* firefox */
-Webkit-box-shadow: 2px 2px 5px # d3c998;/* webkit */
Box-shadow: 2px 2px 5px # d3c998;/* opera or ie9 */
}
Method 2: SomeJsAnd. HtcOfHackFile implementationIE.
Ie-css3.htc is an htc file that allows IE to support some CSS3 properties, not just box-shadow, it also allows your IE browser to support the border-radius and text-shadow attributes.
Its usage is: download it and put it to your server directory
Write the following code in your
The disadvantage of this script is that IE only supports some box-shadow values. Note:
Method 3: UseJQueryPlug-insJquery. boxshadow. js,Plug-ins are http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js
The method is simple. Introduce the file and the jquery version library into the head tag and insert the following JavaScript code:
<Script type = "text/javascript">
$ (Document). ready (Function(){
If($. Browser. msie ){
$ ('. Obj'). boxShadow (-10,-10, 5, "# 0cc"); // The box-shadow element is used.
}
});
</Script>
Note: In js, you can use: obj. style. webkitBoxShadow = value (string); obj. style. Required boxShadow = value (string); obj. style. boxShadow = value (string );
Additional knowledge:CSS3Attributes
Border-top-left-radius: [<Length> | <percentage>] [<length> | <percentage>]?
Default Value: 0
Valid value:
<Length>:
Use the length value to set the radius of the rounded corner in the upper left corner (top-left) of the object. Negative value not allowed
<Percentage>:
Set the radius of the rounded corner in the upper left corner (top-left) of the object by percentage. Negative value not allowed
Note:
Sets or retrieves the rounded border in the upper left corner of an object. Two parameters are provided. Two parameters are separated by spaces. One parameter value can be set for each parameter. 1st parameters indicate the horizontal radius, and 2nd parameters indicate the vertical radius, if 2nd parameters are omitted, the default value is 1st. For example, if border-top-left-radius: 5px10px is set, the radius of the horizontal rounded corner of top-left is 5 PX, and the radius of the vertical rounded corner is 10 PX. The corresponding script feature is borderTopLeftRadius.
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
