Effect Demo:
Box-shadow adds one or more shadows to the box. ie9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 support Box-shadow properties.
Grammar:
The code is as follows:
Box-shadow:h-shadow v-shadow blur spread color inset;
H-shadow,v-shadow must. Horizontal, vertical shadow position. Allows assignment of values. Blur optional, blur distance. Spread optional, the size of the shadow. The color is optional and the shadow is colored. Inset optional to change the outer shadow (outset) to an inner shadow.
Let's look at a few simple examples:
<body> <p class= "box" > <span class= "caption" >A</span> </p> <p class= "box" > <span class= "caption" >B</span> </p> <p class= "box" > <span class= "caption" >c </span> </p> <p class= "box" > <span class= "caption" >D</span> </p> <p class= "Box" > <span class= "caption" >E</span> </p> <p class= "box" > <span class= " Caption ">F</span> </p> <p class=" box "> <span class=" caption ">G</span> </p > <p class= "box" > <span class= "caption" >H</span> </p></body>
Just set them to a simple style:
. box { background-color: #fff; border:3px solid #ccc; Float:left; margin:20px 40px 0 0; height:65px; width:160px; Text-align:center; } . caption { font-size:20px; position:relative; top:20px; }Then hit practice the use of various parameters. Basically, when using Box-shadow, you have to provide the minimum of H-shadow and V-shadow two parameters:
. Box:nth-child (1) { -webkit-box-shadow:3px 3px #f3d42e; -moz-box-shadow:3px 3px #f3d42e; box-shadow:3px 3px #f3d42e; }If the displacement distance is positive, it is shifted to the right or downward, or to the left or upward
Plus the 5px blur radius:
. Box:nth-child (2) { -webkit-box-shadow:3px 3px 5px #f3d42e; -moz-box-shadow:3px 3px 5px #f3d42e; box-shadow:3px 3px 5px #f3d42e; }The spread distance strengthens the actual shadow range:
. Box:nth-child (3) { -webkit-box-shadow:3px 3px 0 5px #f3d42e; -moz-box-shadow:3px 3px 0 5px #f3d42e; box-shadow:3px 3px 0 5px #f3d42e; }The distance of the displacement is added to the diffusion distance, so if the value is negative, the range of shadows will be reduced.
The diffused part will also have a blurred effect:
. Box:nth-child (4) { -webkit-box-shadow:3px 3px 5px 5px #f3d42e; -moz-box-shadow:3px 3px 5px 5px #f3d42e; box-shadow:3px 3px 5px 5px #f3d42e; }If the displacement distance is not set, then the blurred effect will be exposed directly around the block:
. Box:nth-child (5) { -webkit-box-shadow:0 0 15px #f3d42e; -moz-box-shadow:0 0 15px #f3d42e; box-shadow:0 0 15px #f3d42e; }Plus the spread distance:
. Box:nth-child (6) { -webkit-box-shadow:0 0 15px 5px #f3d42e; -moz-box-shadow:0 0 15px 5px #f3d42e; box-shadow:0 0 15px 5px #f3d42e; }In addition, if you add the inset parameter to the use, the shadow effect that originally appears outside the block becomes the effect of the inner shadow:
. Box:nth-child (7) { -webkit-box-shadow:3px 3px #f3d42e inset; -moz-box-shadow:3px 3px #f3d42e inset; box-shadow:3px 3px #f3d42e inset; }Have you noticed it carefully? When the displacement distance is positive, it is shifted to the right or downward, but because of the inset parameter, the effect is reversed:
Add blur radius and spread distance:
. Box:nth-child (8) { -webkit-box-shadow:3px 3px 5px 5px #f3d42e inset; -moz-box-shadow:3px 3px 5px 5px #f3d42e inset; box-shadow:3px 3px 5px 5px #f3d42e inset; }Add more than one set of shadow settings to the element:
. Box:nth-child (9) { -webkit-box-shadow:13px 13px #f3d42e, -10px 10px #33d42e, -5px-10px #ff0d2d, 10px-8px #034d5e; c1/>-moz-box-shadow:13px 13px #f3d42e, -10px 10px #33d42e, -5px-10px #ff0d2d, 10px-8px #034d5e; box-shadow:13px 13px #f3d42e, -10px 10px #33d42e, -5px-10px #ff0d2d, 10px-8px #034d5e; }The hierarchical relationship of the shadow is the higher the level of the first set.
When familiar with the use of Box-shadow, it can be very simple and quick to add a variety of elements with a more design sense of the border effect yo!
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
