CSS3 classic tutorial series: box-shadow

The previous article in The CSS3 classic tutorial series describes the usage of linear gradient (linear-gradient) it is one of the most commonly used CSS3 features. The box shadow effect is the same as the rounded corner effect, and can be achieved by Directly Writing CSS code.

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

The box-shadow in CSS3 is somewhat similar to text-shadow, except that text-shadow sets the shadow for the object text, while box-shadow sets the layer shadow for the object. In this article, we will not talk about IE. We will only talk about the specific usage of box-shadow.

Syntax:

box-shadow:inset x-offset y-offset blur-radius spread-radius color

That is:

Object selector {box-shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color}

Valid value:

The box-shadow attribute has a maximum of six parameter settings. The values are as follows:

Shadow type

This parameter is an optional value. If no value is set, the default projection method is the outer shadow. If the unique value "inset" is used, the outer shadow is changed to the inner shadow, that is to say, when the shadow type is set to "inset", the projection is the inner shadow;

X-offset

It refers to the Shadow horizontal offset. Its value can be a positive or negative value. If its value is a positive value, the shadow is on the right side of the object. If its value is a negative value, shadow is on the left of the object;

Y-offset

It refers to the vertical offset of the Shadow. Its value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object. If its value is negative, the shadow is at the top of the object;

Shadow blur radius:

This parameter is optional, but its value can only be a positive value. If its value is 0, it indicates that the shadow has no blur effect, and the greater the value, the blurrier the edge of the shadow;

Radius of shadow Extension

This parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced.

Shadow color

This parameter is optional. If no color is set, the browser will take the default color, but the default color of each browser is different, especially in the safari and chrome browsers under the webkit kernel will be colorless, this parameter is transparent. We recommend that you do not omit this parameter.

Browser compatibility:

　　

We also involve the issue of prefix of various browsers, such as-moz in Mozilla kernel and webkit in webkit kernel. It is tested that no prefix is required for the latest Firefox and Google Chrome browsers, but it still requires leading edge in safari. In order to be compatible with the supported browsers, the format of box-shadow should be as follows:

// Firefox4.0 -- moz-box-shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color; // Safari and Google chrome10.0 -- webkit-box-shadow: projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color; // Firefox4.0 +, Google chrome 10.0 +, Oprea10.5 + and IE9box-shadow: projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color;

Features of box-shadow:

Compared with the image made by ps, the box-shadow of CSS3 can get different effects by changing its parameters, such as changing the shadow offset settings, we can use a shadow to appear only on the top, bottom, left, and right sides of an object, or on some of its sides. Second, we can adjust the shadow size, edge blur, and shadow color at any time, third, you can change the shadow to an inner shadow at any time. You can also set multiple shadow effects.

Let's take a look at a simple example:

.demo1 {  -webkit-box-shadow: 3px 3px 3px;  -moz-box-shadow: 3px 3px 3px;  box-shadow: 3px 3px 3px;}

Safari/Chrome effects under Firefox/Opera

Back to the above example, in fact, there will not be any shadow effect in the webkit kernel browsers Safari and Google Chrome, although the W3C standard says that the color is optional, however, when no color is provided, safari/chrome and firefox are different. In the webkit kernel browser, the shadow is transparent, while in mozilla and oprea, the shadow is black. For this reason, do not forget to add the shadow value when using box-shadow.

Based on the above image, we can see whether a box-shadow is computed as content.

<div class="outer">  <div class="inter"> </div></div>   

We set the external div to 100px * 100px, And the div inside to 60px * 60px, and add a green shadow with a downward shifted 50px to the right on the div inside, let's see what happens to the shadow?

  .outer {    width: 100px;    height: 100px;    border: 1px solid #ccc;  }  .inter {    width: 60px;    height: 60px;    margin: 10px auto;    background: #f69;    -webkit-box-shadow: 50px 50px green;    -moz-box-shadow: 50px 50px green;    box-shadow: 50px 50px green;  }

　　

We can see from the effects of various big views that the shadow will break the container and run out. There is a picture in the standard that describes how box-shadow works. This figure intuitively shows us how to use box-shadow.

　　

This figure tells us a lot of information, such as borer-radius rounded corner, shadow extension, shadow blur, and how padding affects the Object Shadow: border-radius with a non-zero value will affect the shape of the shadow with the same effect, but border-image will not affect any shape of the shadow of the object. The object shadow is the same as that of the box model, the vulva shadow is under the background of the object, and the inner shadow is under the background of the border. Therefore, the entire level is: Border> Inner Shadow> background image> background color> outer shadow. As we all know, our background images are based on the background color.

IE filter method:

As we have mentioned earlier, IE9 and below do not support box-shadow of CSS3. To solve this compatibility problem, we can use the shadow filter of IE in IE to implement it:

Filter: progid: DXImageTransform. Microsoft. Shadow (color = 'color value', ction = Shadow angle (numerical value), Strength = Shadow radius (numerical value ));

Note: The filter must be used together with the background attribute; otherwise, the filter becomes invalid. In addition to the filter method, we also have a way to achieve the effect of IE. That is, the jQuery. boxshadow. js plug-in is used. So how to use it? In fact, it is very easy to download this jquery. boxshadow. js plug-in to your project, and then load the jquery version library and jquery. boxshadow. js to the page, such:

<script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.boxshadow.js"></script>

Then you can create a separate js file for processing, or directly owe a <script> </script> to the

$ (Document ). ready (function () {if ($. browser. msie) {$ ('. demo1 '). boxShadow (888, 5, "#"); // The demo1 element uses the box-shadow $ ('. demo2 '). boxShadow (-10,-, "# f36"); // The demo2 element uses box-shadow }});

We have learned about the basic concepts of box-shadow in CSS3, so we can use some examples to consolidate the usage of box-shadow:

If no special instructions are provided, the HTML code used by the instance here is as follows, but the second class name is changed, such as demo1 demo2:

<div class="demo demo2></div>

Basic CSS styles:

  .demo {    width: 100px;    height: 50px;        background: #f69;  }

To save time, I only wrote one box-shadow in the following css Code. However, you must remember: -Add webkit-box-shadow and-moz-box-shadow. Otherwise, safari and chrome will have no effect. As mentioned above, this is not detailed here.

Effect 1: Unilateral Effect

. Dome2 {box-shadow:-2px 0 0 green, // left shadow 0-2px 0 blue, // top shadow 0 2px 0 red, // bottom shadow 2px 0 0 yellow; // right shadow}

　　

In the above example, we set box-shadow for the four sides of the object, but we use a multi-level box-shadow application. If you only need to apply the shadow on one side of the object, we can delete the setting without shadow. Design a shadow for the four sides of the object by changing the positive and negative values of x-offset and y-offset. When x-offset is negative, the left shadow is generated, right shadow is generated when the value is positive, and y-offset is the base shadow generated when the value is positive. The top shadow is generated when the value is negative. Set the Blur radius to 0. If the Blur radius is not set to 0, the other three sides will also have shadows, and a multi-shadow sequence problem is also involved here. When multiple shadow attributes are used for the same element, pay attention to the sequence of these attributes. The shadow written first is displayed at the top layer. For example, change the above instance, adding a fuzzy value to it will show the effect better:

.demo3 {    box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;  }

　　

In this example, the left side is placed on the first side, the green shadow is on the blue side of the top side, and the blue side of the top side is on the yellow on the right side, the yellow at the right side is on the red at the bottom side. Therefore, when using shadow for multiple times, you must pay attention to its order. In particular, when the shadow blur values are different, some websites may write the following statements, however, I have been tested in multiple browsers. This method is invalid,

. Demo4 {/* is incorrect (I have introduced on the Internet that it can be written in this way, but I have tested it for many times, so I do not recommend writing it in this way, to avoid unnecessary errors) */box-shadow:-2px 0 0 green, box-shadow: 0-2px 0 blue, box-shadow: 0 2px 0 red, box-shadow: 2px 0 0 yellow ;}

　　

The effect also proves that the above method is incorrect. I hope you will pay attention to the multi-level shadow Writing Method in practical application. At the same time, we also remind you that you cannot do your best to read the relevant information on the Internet. It is best to take the time to complete the verification.

When using multi-level shadow, you also need to pay attention to a detailed problem. If the preceding shadow blur value is smaller than the subsequent shadow blur value, the preceding shadow blur value is displayed on the back, if the Blur value of the shadow is greater than the Blur value of the shadow, the shadow will overwrite the shadow. For example:

/* The Blur radius value of the first shadow is smaller than the Blur radius of the second shadow */. demo5 {box-shadow: 0 0 5px red, 0 0 15px blue;}/The Blur radius of the first shadow is greater than the Blur radius of the second shadow */. demo6 {box-shadow: 0 0 15px red, 0 0 5px blue ;}

　　

The instance effect is proved again: we can see that the red shadow on the Blue Shadow does not cover the Blue Shadow, because our Red Shadow blur value is only 5px, it is smaller than the 15px blur value in the blue color. In the right image, we can only see the Red Shadow, because the Blur radius of the first Red Shadow is greater than the Blur radius of the second blue, so the Red Shadow hides the Blue Shadow. You can remember this.

Effect 2: The four sides have the same shadow effect (only set the shadow blur radius and shadow color)

  .demo7 {    box-shadow: 0 0 5px rgb(250,0,0);  }

　　

Here we set the HEX value. We can also apply the rgba value of css3 to the shadow color of box-shadow. The advantage is that, the box-shadow color has an alpha transparency value, as shown in the following example:

 .demo8 {    box-shadow: 0 0 5px rgba(250,0,0,0.5); }

　　

Compared with the above two examples, we have not applied the transparent value in the previous example, but we have applied the transparent value of 0.5 in the next example. In contrast, the shadow below is not lighter. Of course, in practice, you can set as needed.

Effect 3: The four sides have the same shadow (only set the shadow extension radius and shadow color)

 .demo9 {  box-shadow: 0 0 0 1px red; }

　　

From the effect, you can think about whether this effect is similar to the boder: 1px solid red in our element. Right, box-shadow can not only produce the shadow effect, but also extend the radius value to create a border-like style for the object. The following is an example of comparison:

/* Border effect */. demo10 {border: 1px solid red;}/* shadow effect */. demo11 {box-shadow: 0 0 0 1px red ;}

　　

In fact, using box-shadow to create a border can only be said to look like a border, but in essence it is not a border. It is essentially different from border. From the above, we can see that the box on the left is 1px lower than the box on the right. As a result, the larger the expansion radius value, the greater the difference between the two, such:

 .demo12 {   border: 20px solid red; } .demo13 {   box-shadow: 0 0 0 20px red; }

　　

Let's take a look at the layout diagram of demo12 and demo13 demos under firebug:

　　

Combined with the layout diagram of the two in firebug, it is proved that the shadow we mentioned earlier does not affect any layout of the page: the border of demo12 is calculated as the width, however, the shadow browser of demo13 is negligible, so with this feature, the border mechanism simulated by shadow can be used freely, but you must pay attention to its hierarchical relationship.

Articles you may be interested in

• CSS3 Media Queries implement responsive design
• CSS3 Tutorials: CSS3 rounded corners
• CSS3 Tutorials: CSS3 shadow details
• CSS3 Tutorials: CSS3 RGBA details
• CSS3 classic tutorial series: CSS3 linear gradient

 

Link to this article: CSS3 getting started Tutorial: CSS3 box shadow (from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources