Summary of CSS3 shadow box-shadow usage and techniques_html/css_WEB-ITnose

This article is excerpted from: http://blog.csdn.net/freshlover/article/details/7610269

text-shadow is to add a shadow effect to the text, and box-shadow is to add a surrounding shadow effect to the element block. With the popularity of html5 and CSS3, the use of this special effect is becoming more and more common.

The basic syntax is {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

Object selector {box-shadow: [Projection method] X-axis offset Y-axis offset shadow blur radius shadow extended radius shadow color}

The parameter setting value of the box-shadow attribute:

Shadow Type: This parameter is optional. If no value is set, the default projection method is outer shadow; if the unique value "inset" is taken, the projection is inner shadow;

X-offset: shadow horizontal offset, its value can be positive or negative . If the value is positive, the shadow is on the right side of the object. When the value is negative, the shadow is on the left side of the object;

Y-offset: vertical offset of the shadow, its value can also be positive or negative. . If it is a positive value, the shadow is at the bottom of the object. When 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 means that the shadow has no blurring effect. The larger the value, the blurr the edge of the shadow;

Shadow expansion radius: This parameter is optional, and its value can be positive or negative. If the value If it is positive, the entire shadow will be expanded, otherwise if the value is negative, it will be reduced;

Shadow color: This parameter is optional. If you do not set the color, the browser will use the default color, but the default color of each browser is inconsistent, especially the transparent color under the Safari and Chrome browsers under the webkit kernel, and the black color under Firefox/Opera (has been verification), it is recommended not to omit this parameter.

Browser compatibility:

In order to be compatible with various mainstream browsers and support lower versions of these mainstream browsers, based on Webkit When using the box-shadow attribute on browsers such as Chrome and Safari, we need to write the name of the attribute in the form -webkit-box-shadow. Firefox browser needs to be written in the form of -moz-box-shadow.

[css] view plain copy

1. .box-shadow{
3. //Firefox4.0-
5. -moz-box-shadow: Projection method X-axis offset Y-axis offset shadow blur radius shadow Expansion radius shadow color; Amount Y-axis offset shadow blur radius shadow expansion radius shadow color; >
box-shadow: Projection method X-axis offset Y-axis offset Shadow blur radius Shadow expansion radius Shadow color;
}
Note: For convenience, in some parts of the following CSS attributes, only the box-shadow attribute is written, and the -moz- and -webkit- prefixes are not written. Don’t forget to use it. Plus.
In order to understand the characteristics of box-shadow more clearly, do a few small tests to see the effect:
Related code:

[html]

view plain copy

1. e1f4ff64491df66c6185f6e73063b5a3  
2. 100db36a723c770d327fc0aef2ce13b1  
3.   
4. 93f0f5c25f18dab9d176bd4f6de5d30e  
5. 1f96cfcade83377c1aefd70bfdf9345d  
6. b2386ffb911b14667cb8f0f91ea547a7CSS3属性：box-shadow测试6e916e0f7d1e588d4f442bf645aedb2f  
7. 7485077f33ac564bdcd581efccdb68ad2cacc6d41bbb37262a98f745aa00fbf0  
8. 76c4351b91f1c9dd02d08926aae5c35d2cacc6d41bbb37262a98f745aa00fbf0  
9. ef0d2420b1e5291570a81009eee48a1a  
10. .box-shadow-1{  
11.   -webkit-box-shadow: 3px 3px 3px;  
12.   -moz-box-shadow: 3px 3px 3px;  
13.   box-shadow: 3px 3px 3px;  
14. }  
15. .box-shadow-2{  
16.   -webkit-box-shadow:0 0 10px #0CC;  
17.   -moz-box-shadow:0 0 10px #0CC;  
18.   box-shadow:0 0 10px #0CC;  
19. }  
20. .box-shadow-3{  
21.   -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
22.   -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
23.   box-shadow:0 0 10px rgba(0, 204, 204, .5);  
24. }  
25. .box-shadow-4{  
26.   -webkit-box-shadow:0 0 10px 15px #0CC;  
27.   -moz-box-shadow:0 0 10px 15px #0CC;  
28.   box-shadow:0 0 10px 15px #0CC;  
29. }  
30. .box-shadow-5{  
31.   -webkit-box-shadow:inset 0 0 10px #0CC;  
32.   -moz-box-shadow:inset 0 0 10px #0CC;  
33.   box-shadow:inset 0 0 10px #0CC;  
34. }  
35. .box-shadow-6{  
36.     box-shadow:-10px 0 10px red, /*左边阴影*/  
37.     10px 0 10px yellow, /*右边阴影*/  
38.     0 -10px 10px blue, /*顶部阴影*/  
39.     0 10px 10px green; /*底边阴影*/  
40. }  
41. .box-shadow-7{  
42.     box-shadow:0 0 10px 5px black,  
43.     0 0 10px 20px red;  
44. }  
45. .box-shadow-8{  
46.     box-shadow:0 0 10px 20px red,  
47.     0 0 10px 5px black;  
48. }  
49. .box-shadow-9{  
50.     box-shadow: 0 0 0 1px red;  
51. }  
52.   
53.   
54.   
55. .obj{  
56.     width:100px;  
57.     height:100px;  
58.     margin:50px auto;  
59.     background:#eee;      
60. }  
61. .outer{  
62.     width: 100px;  
63.     height: 100px;  
64.     border: 1px solid red;  
65. }  
66. .inner{  
67.     width: 60px;  
68.     height: 60px;  
69.     background-color: red;  
70.     -webkit-box-shadow: 50px 50px blue;  
71.     -moz-box-shadow: 50px 50px blue;  
72.     box-shadow: 50px 50px blue;  
73.   }  
74. 531ac245ce3e4fe3d50054a55f265927  
75. 9c3bca370b5104690d9ef395f2c5f8d1  
76.   
77. 6c04bd5ca3fcae76e30b72ad730ca86d  
78.     4e17d5395a9fd855d8f2eb38415e3ab816b28748ea4df4d9c2150843fecfba68  
79.     ee9ceb6a8992b0406a673fa9705c68bb  
80.         e19b3217ccbbf7f4b7b9ceb7e76c47e516b28748ea4df4d9c2150843fecfba68  
81.     16b28748ea4df4d9c2150843fecfba68  
82.     c2cf73f55e2bc9566cfea48d0c8387e316b28748ea4df4d9c2150843fecfba68  
83.     038401daeca7549156ee05f2c147c47a16b28748ea4df4d9c2150843fecfba68  
84.     c65d15247fdc036cced1ec16cb930a3816b28748ea4df4d9c2150843fecfba68  
85.     ef3eaacff8a6c4f21bc44d4439e5761816b28748ea4df4d9c2150843fecfba68  
86.     18364b2e23a31eef589b21d1e6755a6f16b28748ea4df4d9c2150843fecfba68  
87.     8cd6161b7ca7cb08f1126a0867c00ae116b28748ea4df4d9c2150843fecfba68  
88.     d697da8a2692d7b85f4f1bd56ca7bc5816b28748ea4df4d9c2150843fecfba68  
89.     fbe5d99444805505a0bc61413911d36c16b28748ea4df4d9c2150843fecfba68
90.   4ec11beb6c39d0703d1751d203c17053
91. $(document).ready(function(){
92. if($.browser.msie) {
93. $('.obj').boxShadow(-10,-10,5,"#0cc"); //The obj element uses box-shadow
94. } }
95. });
96. 2cacc6d41bbb37262a98f745aa00fbf0
98. 36cc49f0c466276486e50c850b7e4956 >

Conclusion:

1) From .box The effect of -shadow-1 can be concluded that when the attribute shadow color is not specified, the shadow appears as a transparent color under the Safari and Chrome browsers under the webkit kernel, and appears as black under Firefox/Opera.

                                                                                                                                                                                                                                 Burst the outer container to reveal the entire shadow effect. The W3C standard explains the principle and performance of box-shadow with diagrams:

From the picture we can understand: rounded border-radius , how shadow expansion radius, shadow blur radius and padding affect the object shadow: a non-zero value of border-radius will affect the shape of the shadow in the same way, but border-image will not affect any shape of the object shadow; object shadow Like the box model hierarchy, the outer shadow will be below the object's background, and the inner shadow will be below the border and above the background. We know that by default the background image is on top of the background color. So the entire hierarchy is: border>inner shadow>background image>background color>outer shadow.

3) From the effect of .box-shadow-2 to .box-shadow-5, we can understand the role of box-shadow value.

. box-shadow-2 is xy with no offset, shadow size 10px, no expansion radius, color #0CC is rgba(0, 204,204, 1), here we use the color HEX value; effect

And box-shadow-3 is based on the effect of box-shadow-2, applying rgba color value, the advantage is to give box-shadow shadow Added alpha transparency effect. Effect:

. box-shadow-4 adds a shadow expansion radius of 15px based on the box-shadow-2 effect.

. box-shadow-5 sets the outer shadow to the inner shadow based on the box-shadow-2 effect.

4). box-shadow-6 An element uses multiple shadows, separated by commas. To set the shadow effect on the four sides of the object, we achieve it by changing the positive and negative values ​​​​of x-offset and y-offset. When x-offset is a negative value, the left shadow is generated. When it is a positive value, the right shadow is generated. The y-offset is Positive values ​​produce a bottom shadow, negative values ​​produce a top shadow. And set the blur radius to 0. If it is not set to 0, the other three sides will also have shadows. This needs attention!

And there is also a multi-shadow order issue involved here. When using multiple shadow attributes for the same element, you need to pay attention to their order. The shadow written first will be displayed at the top, such as box-shadow-7 is set to different blur values:

. box-shadow-7{

注意这样的写法是错误的：{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}

box-shadow:0 0 10px 5px black,

0 0 10px 20px red;

}

will be visible Create the cascading sequence effect:

If you adjust the two shadow effects, change them to the following:

.box-shadow-8{

box-shadow:0 0 10px 20px red,

0 0 10px 5px black;

}

will only show the red shadow effect because The red shadow layer is on top, and the blur radius is large, completely blocking the black shadow behind it.

The conclusion is: if the blur value of the shadow in the front is less than the blur value of the shadow in the back, then the front one is displayed above the back. If the front shadow is If the blur value is greater than the blur value of the shadow behind, the shadow in the front will cover the shadow effect in the back.

4) Border-like border effect (only set shadow expansion radius and shadow color)

.box-shadow-9 is similar to boder:1px solid red, but box-shadow The effect is different from the border effect in the object height, which is exactly one expansion radius larger than the border height. And the shadow does not affect any layout of the page, which can be confirmed by viewing the layout diagram under firebug.

5) Simulate the box-shadow shadow effect in CSS3 under IE

Method 1: You can use IE’s Shadow filter

Basic syntax: filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction=Shadow angle (numeric value), Strength=Shadow radius (numeric value));

Note : This filter must be used together with the background attribute, otherwise the filter will be invalid.

Simulate box-shadow (shadow) code in css3 under IE:

[css] view plain copy

1. .box-shadow{
2. filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/ *for ie6,7,8*/
3. background-color: #ccc;
4. -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
5. -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
6. box-shadow:2px 2px 5px #969696;/*opera or ie9*/
7. }

In the Children’s Day theme, I handled it like this:

[css ] view plain copy

1. li.blk-item{
2. width:423px;
3. height:229px ;
4. float:left;
5. padding:8px;
6. margin:2px 18px 13px 21px;
7. display:inline;
8. border:1px solid #d3c998; ;/*for ie6,7,8*/
9. background-color: #fff;
10. -moz-box-shadow:2px 2px 5px#d3c998;/*firefox*/
11. -webkit-box-shadow:2px 2px 5px#d3c998;/*webkit*/
12. >
13. }

Method 2: Some js and .htc hack files can be implemented in IE shadow effect.

ie-css3.htc is an htc file that allows the IE browser to support some CSS3 attributes, not just box-shadow, but also allows your IE browser to support the rounded corner attribute border -radius and text-shadow properties text-shadow.

How to use it is: download it and put it in your server directory Write the following code in your 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1:

The disadvantage of this script is that IE only supports part of the box-shadow values. Note:

When you use this htc file, as long as box-shadow, -moz-box-shadow or -webkit-box-shadow is written in your CSS, IE will will render.

When using this htc file, you cannot write box-shadow: 0 0 10px red; but box-shadow: 0px 0px 10px red; otherwise it will fail in IE.

Alpha transparency in RGBA values ​​is not supported.

Inset inner shadow is not supported.

Shadow expansion is not supported.

Shadows will only appear black in IE, no matter what other colors you set to them.

Method 3: Use the jQuery plug-in jquery.boxshadow.js.

The download address of the plug-in is http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery. boxshadow.js

The method of use is very simple. Introduce the file and jquery repository into the head tag and insert the following js effect code:

[javascript]

view plain copy

1. 4ec11beb6c39d0703d1751d203c17053
2. $(document).ready(function(){
3. if($.browser.msie) {
4. $('.obj').boxShadow(-10,-10,5,"#0cc"); //The obj element uses box-shadow
5. }
6. });
7. 2cacc6d41bbb37262a98f745aa00fbf0 .webkitBoxShadow=value (string);obj.style.MozBoxShadow=value (string);obj.style.boxShadow=value (string);

Supplementary knowledge : CSS3 properties

border-top-left-radius

: [d82af2074b26fcfe177e947839b5d381 | 42c97a047d75abc12b9b351eb8562711 ] [ d82af2074b26fcfe177e947839b5d381 | 42c97a047d75abc12b9b351eb8562711 ]?

Default value: 0 Value:

d82af2074b26fcfe177e947839b5d381: Use the length value to set the top-left corner of the object Corner radius length. Negative values ​​are not allowed

42c97a047d75abc12b9b351eb8562711:

Use percentage to set the top-left corner radius length of the object. Negative values ​​are not allowed

Description:

Sets or retrieves the upper left corner rounded border of the object. Provide 2 parameters, separated by spaces. Each parameter is allowed to set 1 parameter value. The first parameter represents the horizontal radius, and the second parameter represents the vertical radius. If the second parameter is omitted, it defaults to the 1st parameter. parameters. For example, setting border-top-left-radius:5px10px; means that the horizontal corner radius of the top-left corner is 5px and the vertical corner radius is 10px. The corresponding script feature is borderTopLeftRadius.

CSS3 Shadow Demonstration Tool

http://www.css88.com/tool/css3Preview/Box-Shadow.html