Home > Developer > JavaScript
Css3 box-shadow, css3
I. Introduction to box-shadow
Add the box-shadow attribute to the boxOne or moreShadow.
Syntax:
box-shadow: offset-x offset-y blur spread color inset;
Box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extension] [shadow color] [Projection mode];
Word Interpretation: Blur: Fuzzy spread: Stretch inset: inconcave
Parameter description:
Offset-x: required. values can be positive or negative. Offset-x horizontal shadow position.
Offset-y: required. values can be positive or negative. The position of the offset-y vertical shadow.
Blur: optional,Only positive values can be taken. Blur-radius indicates the blur radius of the Shadow. 0 indicates that the blur is not performed. The greater the value, the blurrier the shadow edge.
Spread: Optional. values can be positive or negative. Spread indicates the size of the perimeter of the Shadow extending to the surrounding area. It is positive, the shadow expands, and the negative shadow decreases.
Color: Optional. The color of the shadow. If this parameter is not set,The browser selects the default color.It is usually black, but the default color of each browser is different. We recommend that you do not omit it. Yesrgb(250,0,0)Or a transparent value.rgba(250,0,0,0.5).
Inset: Optional. Keyword to change the external projection (default outset) to the internal projection. Inset shadow on the background and under the content.
Note: Inset can be written in the first or last parameter. Other positions are invalid.
2. Use 1. The horizontal vertical offset is 0 and there can be shadowsIf the offset-x or offset-y value is 0, the shadow is behind the element. In this case, the blur-radius value or spread value can be shadow.
Example:
The first div generates a shadow effect by setting blur-radius.
The second div creates a shadow effect by setting the spread positive value.
The third div creates a shadow effect by setting a negative spread value.
Note that the expanded Shadow must be used with The Blur radius of the shadow.
I personally think this should not be used in combination, but it is impossible to set only the extended shadow, because the values of the extended shadow and shadow Blur can be positive. If only the extended shadow is used, it will be parsed by the browser as a blur shadow, so it can be simply understood as "the extended shadow must be used with The Blur radius of the Shadow". If only the extended shadow is used, can be written as: box-shadow: 0 0 0 1px ;.
<Style type = "text/css"> div {width: 100px; height: 100px; margin: 50px; border: 10px dotted pink; display: inline-block ;}. blur {box-shadow: 0 0 20px;/* box-shadow: 0 0 20px green; * // * You can also customize the color */}. spread-positive {box-shadow: 0 0 20px 5px;/* box-shadow: 0 0 20px 5px green; * // * You can also customize the color */}. spread-negative {box-shadow: 0 0 20px-5px;/* box-shadow: 0 0 20px-5px green; * // * You can also customize the color */} </style> <body> <div class = "blur"> </div> <div class = "spread-positive"> </div> <div class = "spread-negative"> </div> </body>
2. Set the horizontal vertical offset to get the shadow effect.
Outset: the horizontal and vertical offset is 0, but The blur and spread values are not set. The shadow is invisible because the circumference of box-shadow is the same as that of border-box, therefore, you can set an offset to display the shadow.
Inset: the horizontal vertical offset is 0. If you do not set blur and spread, you cannot see the shadow because the circumference of box-shadow is the same as that of padding-box, you can also set an offset to display the shadow.
Example:
<style type="text/css">div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block;}.shadow0{box-shadow: 0 0;} .shadow1{box-shadow: 1px 1px;}.shadow10{box-shadow: 10px 10px;}.inset-shadow0{box-shadow: 0 0 inset;} .inset-shadow1{box-shadow: 1px 1px inset;}.inset-shadow10{box-shadow: 10px 10px inset;}</style><body> <div class="shadow0"></div> <div class="shadow1"></div> <div class="shadow10"></div> <div class="inset-shadow0"></div> <div class="inset-shadow1"></div> <div class="inset-shadow10"></div></body>
3. Projection Mode
The default projection method is outset, that is, external projection. You can set inset to allow inner projection.
Example: The first div defaults to outset, the second sets inset, and the third sets two shadows at the same time to better see the relationship between outset and inset. The fourth div shows that the inset shadow is on the background, content.
<Style type = "text/css"> div {width: 100px; height: 100px; margin: 50px; border: 10px dotted pink; display: inline-block; vertical-align: top ;}. outset {box-shadow: 10px 10px teal ;}. inset {box-shadow: 10px 10px teal inset ;}. double {box-shadow: 10px 10px teal inset, 10px 10px teal ;}. bg {background-color: yellow ;} </style> <body> <div class = "outset"> </div> <div class = "inset"> </div> <div class = "double"> </div> <div class = "inset bg"> inset shadow on the background, content </div> </body>
4. If the border-radius attribute is specified at the same time, the shadow will display the same rounded corner.
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; border-radius: 50px; }.shadow{ box-shadow: 0 0 10px 10px green;}</style><body><div class="shadow"></div></body>
5. Classic examples
An example in w3c. Http://www.w3.org/TR/css3-background/#the-box-shadow
Visible:
This effect is shown above. Now I want to add some more content.
Syntax: You can set any number of shadows separated by commas.
When a box has multiple shadows, pay attention to the sequence: Multiple shadows are distributed from top to bottom, and the first shadow is at the top layer.
Example: Unilateral shadowEffect
Let's explain it first.: You can separately set the shadow of the left border, the shadow of the right border, the shadow of the top border, and the shadow of the bottom border. This is also true, because the effect looks like this, the root cause is that the shadow is behind the box, but changes the position of the Shadow. The shadow of the other three sides still exists, but is overwritten, setting the shadow of an edge is a very imaginary thing. Ah, I am still a little confused when I say this on the Internet. So here I am talking about the single-side shadow effect, which is just an effect, in essence, it is still a box.
Example: Set red, orange, yellow, and green for the top right and bottom left border of the first div respectively. If there are four colors, red-shadow is at the top layer and green-shadow is at the bottom layer, as shown in figureLeft.
Add the blur radius to it, and the effect is more obvious, as shown in figureMediumIt can be seen that the Blur radius of red-shadow is not affected because it is at the top layer. Next, orange-shadow is followed by red-shadow's radius; yellow-shadow is affected by the radius of orange-shadow and red-shadow. Similarly, green-shadow is affected by the radius of all shadow above it.
If you still don't quite understand it, set a large radius for red-shadow, for example, 50, to see the obvious effect. SeeRight.
<style type="text/css">div{ width: 100px; height: 100px; margin:50px; display: inline-block; border: 10px dotted pink;}.shadow{ box-shadow: 0 -5px red, 5px 0 orange, 0 5px yellow, -5px 0 green;}.blur-shadow{ box-shadow: 0 -5px 5px red, 5px 0 5px orange, 0 5px 5px yellow, -5px 0 5px green;}.big-redShadow{ box-shadow: 0 -5px 50px red, 5px 0 5px orange, 0 5px 5px yellow, -5px 0 5px green;}</style><body> <div class="shadow"></div> <div class="blur-shadow"></div> <div class="big-redShadow"></div></body>
7. Shadow and Layout
Shadow does not affect the layout, but may overwrite the shadows of other boxes or other boxes.
The shadow does not trigger the scroll bar or increase the size of the scroll area.
Therefore, shadows can be ignored during layout.
8. Use spreadSimulate border with spread
<Style type = "text/css"> div {width: 100px; height: 100px; display: inline-block; margin: 10px; vertical-align: top ;}. border {border: 1px solid red ;}. spread {box-shadow: 0 0 0 1px red ;}. muli-border {box-shadow: 0 0 2px red, 0 0 4px green, 0 0 0 6px blue ;} </style> <body> <div class = "border"> border </div> <div class = "spread"> box-shadow </div> <div class =" muli-border "> multiple <br/> box-shadow </div> </body>
Use spread to implement two-color square brackets
<Style type = "text/css">. decorator {width: 300px; height: 100px; padding: 30px; box-shadow:-30px-30px 0-25px red, 30px 30px 0-25px green ;} </style> <body> <div class = "decorator"> section content: Use box-shadow to simulate two-color square brackets box-shadow:-24px-24px 0-20px red, 24px 24px 0-20px green; </div> </body>
You can also use box-shadow to implement some effects such as gradient. If you are interested, please refer to this article.
Iii. resource linksW3c box-shadow
Box-shadow effect
Http://elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html
Http://viget.com/uploads/file/boxshadows/
MDN box-shadow
Online Automatic Shadow Generation Tool
Mozilla interaction tool can generate shadow
Use css3 to create a Drop shadow effect
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
