Use of the Css3box-shadow property

Source: Internet
Author: User

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 :

-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://

The above blog post, referring to and Http://

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.