A summary of the use and techniques of CSS3 shadow Box-shadow

Text-shadowis to add a shadow effect to the text, Box-shadow is to add a perimeter shadow effect to the element block. With HTML5And 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 mode ] X -axis offset Y - axis offset shadow blur radius Shadow expansion radius Shadow color }

Box-shadow property to the value of the parameter setting:

Shadow type: This parameter is optional. If no value is set, the default projection is an outer shadow, and if its unique value is "inset", its projection is an inner shadow;

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

Y-offset: The vertical offset of the shadow, which can also be a positive or negative value. If positive, the shadow is at the bottom of the object and its value is negative, and the shadow is at the top of the object;

Shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

Shadow color: This parameter is optional. If you do not set the color, the browser will take the default color, but the browser default color inconsistency, especially in the WebKit kernel under the Safari and chrome under the transparent color, under Firefox/opera Black (verified), it is recommended not to omit this parameter.

Browser-compatible:

To be compatible with mainstream browsers and to support the lower versions of these mainstream browsers, when using the Box-shadow property on browsers such as WebKit-based chrome and Safari, we need to write the name of the property in-webkit-box-shadow form. The Firefox browser needs to be written in-moz-box-shadow form.

. box-shadow{  //firefox4.0-  -moz-box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;  Safariand 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;  }

Note: For convenience, after the CSS properties of some places only write the Box-shadow property, do not write-moz-and-webkit-prefix form, in use do not forget to add.

For a clearer understanding of the characteristics of Box-shadow, do a few small tests to see the effect:

Related code:

<! DOCTYPE html> 

Conclusion:

1) from the effect of. Box-shadow-1 can be obtained without specifying the shadow color of the property, the shadow in Safari and Chrome under the WebKit kernel behaves as a transparent color, which behaves black under Firefox/opera.


2) from the comparison of the internal and external two P blocks inner and outer, all the mainstream browsers that support Box-shadow are represented as follows: The inner shadow bursting the outer container renders the entire shadow effect. The principle and performance of Box-shadow is explained by the standard of the way of illustration:



We can see how the fillet Border-radius, the shadow extension radius, the shadow blur radius, and how padding affect the object's shadow: Border-radius with a value other than 0 will affect the shape of the shadow with the same effect, However, the border-image does not affect any shape of the object's shadow; The shadow of the object is the same as the hierarchy of the box model, and the outer shadow is below the background of the object and the inner shadow below the border. We know that the default background picture is above the background color. So the entire hierarchy is: Border > Inner shadow > Background picture > Background Color > Outer shadow.


3) from. Box-shadow-2 to. Box-shadow-5 effect, we can understand the function of Box-shadow value.

. Box-shadow-2 is XY no offset, shadow size 10px, no expansion radius, color #0cc namely Rgba (0, 204,204,1), here we use color hex value; effect



and. Box-shadow-3 is in. Based on the box-shadow-2 effect, the RGBA color value is applied, with the benefit of adding alpha transparency to the Box-shadow shadow. Effect:


. Box-shadow-4 in. The shadow extension radius of 15px is added based on the box-shadow-2 effect.


. Box-shadow-5 in. Based on the box-shadow-2 effect, the outer shadow is set to an inner shadow.


4). Box-shadow-6 one element uses multiple shadows, and multiple shadows are separated by commas. To set the shadow effect on the four sides of the object, we do this by changing the positive negative values of x-offset and Y-offset, where x-offset is negative, the left shadow is generated, the right shadow is generated for positive values, and the Y-offset is a positive value that generates a bottom shadow and a negative value when the top shadow is generated. and set the blur radius to 0, if not set to 0 then the other three sides will also have a shadow. This needs attention!


Note that the notation is wrong: {box-shadow:-10px 0 10px red, box-shadow:10px 0 10pxblue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px Green}


And there's a multiple-shadow order problem. When you use multiple shadow properties for the same element, you need to be aware of its order, and the first-written shadow will be displayed at the top level, such as. Box-shadow-7 is set to a different fuzzy value:

. box-shadow-7{

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

0 0 10px 20px Red;

}

You will be able to see the sequential effect of the Cascade:


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

. 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 above, the blur radius is large, and the black shadow behind is completely obscured.


The conclusion is that if the previous shadow blur value is less than the shadow blur value that follows, the front shadow will cover the shadow effect behind if the blur value of the front shadow is greater than the shadow blur value that follows.

4) class border border effect (only set shadow expansion radius and shadow color)

The effect of the. Box-shadow-9 is similar to boder:1px solid red, but the Box-shadow effect differs from the border effect on the object height, which is an extended radius greater than the border height. And the shadow does not affect any layout of the page, which can be confirmed by looking at the layout diagram under Firebug.


5)   box-shadow Shadow effect in the simulated css3 under ie

method One: You can use IE of the Shadow Filter

basic Syntax : Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (numeric) );

Note : The filter must be used with the background property, otherwise the filter will fail.

Box-shadow (shadow) code in analog CSS3 under 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*/

}



In children's Day's topic, I dealt with 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 ', direction=135,strength=5);/*for ie6,7,8*/

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 Two: some JS and the . HTC of the hack files can be implemented IE the shadow effect in the. 

IE-CSS3.HTC is an HTC file that allows IE browser to support partial CSS3 properties, not just box-shadow, it also allows your IE browser to support fillet properties Border-radius and Text Shadow properties Text-shadow.

It is used by downloading it and putting it in your server directory

Write the following code in your 
The disadvantage of this script is that IE only supports part of the Box-shadow value. Need to note:


 

 
  
 
   
When you use this HTC file, in your CSS, as long as you write any kind of Box-shadow,-moz-box-shadow or-webkit-box-shadow, IE will render.
 
   
When using this HTC file, you cannot write box-shadow:0 0 10px red; And should be box-shadow:0px 0px 10px red; Otherwise, IE will fail.
 
   
Alpha Transparency in RGBA values is not supported.
 
   
Inset inner shadow is not supported.
 
   
Shadow extensions are not supported.
 
   
Shadows are only shown in black in IE, no matter what color you set.
 
  

 
method Three: Use JQuery the plugin Jquery.boxshadow.js , the download address of the plugin is http://www.php.cn/

Using the method is simple, the file and the jquery repository into the head tag, insert the following JS effect code:



<script type= "Text/javascript" >

$ (document). Ready (function() {

　　if ($.browser.msie) {

$ ('. obj '). Boxshadow ( -10,-10,5, "#0cc"); The obj element uses the Box-shadow

}

});

</script>

Note: JS can be used: obj.style.webkitboxshadow= value (string); obj.style.mozboxshadow= value (string); obj.style.boxshadow= value (string);


Additional knowledge: CSS3 of the Properties

Border-top-left-radius:[<length> | <percentage>] [<length> |<percentage>]?

Default value: 0

Value:

<length>:

Sets the upper-left corner (top-left) fillet radius length of the object with a length value. Negative values are not allowed

<percentage>:

Sets the upper-left corner (top-left) fillet radius length of the object in percent. Negative values are not allowed

Description