CSS3 the use of shadow Box-shadow function

This time to everyone to bring CSS3 shadow Box-shadow function of the use of detailed, using CSS3 shadow Box-shadow the attention of the matter, the following is the actual case, together to see.

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

Value of the parameter setting for the Box-shadow property:

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{           //firefox0-           -moz-box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;           Safariand Google chrome0-           -webkit-box-shadow: Projection mode x-axis offset y-axis offset shadow blur radius Shadow extended radius shadow color;           firefox0+, Google Chrome 0+, oprea5+ 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 has 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 10px blue,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's shadow filter

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

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:DXImageTransformMicrosoftShadow (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:

liblk-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:DXImageTransformMicrosoftShadow (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. HTC's hack file can implement the shadow effect in IE.

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 plug-in jquery.boxshadow.js, the download address of the plugin is Http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

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 ($browsermsie) {       $ (' obj ') Boxshadow ( -10,-10,5, "#0cc"); The obj element uses Box-shadow     }   });  </script>
Note: JS can be used: obj.style.webkitboxshadow= value (string); obj.style.mozboxshadow= value (string); obj.style.boxshadow= value (string);

Supplemental Knowledge: Properties of CSS3

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

Sets or retrieves the upper-left corner rounded border of an object. Provides 2 parameters, 2 parameters are separated by a space, each parameter allows to set 1 parameter values, the 1th parameter represents the horizontal radius, and the 2nd parameter represents the vertical radius, as the 2nd parameter is omitted, the default equals the 1th parameter. If border-top-left-radius:5px10px is set, the horizontal fillet radius of the top-left angle is 5px and the vertical fillet radius is 10px. The corresponding script attribute is Bordertopleftradius.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

The method of horizontal vertical centering of three absolutely positioned elements

width:100%; The difference between the use and the Width:auto

Horizontal Vertical Centering Method