CSS3 Study Notes-box-shadow

Today we will introduce the shadow of CSS3: box-shadow.

 

Complete box-shadow Syntax:

Actually:

{Box-shadow: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color}

 

The following is a simple example:

   1:  .test{

   2:      box-shadow:10px 10px red;

   3:  }

• )

If:

 

 

Wit I found: if only the offset value on the X and Y axes is set, the shadow size is the size of the original container. Here we will pave the way for the shadow radius.

Let's look at a more complex example,

   1:  .test{

   2:      box-shadow:10px 10px 5px red;

   3:  }

We can see that after the third value is added, the shadow is blurred.

Note that:

This parameter is optional, and its value can only be a positive value. The greater the value, the blurrier the edge of the shadow;

If the value is negative, the browser ignores it;

If the value is 0, the shadow has no blur effect.

 

Now let's try the effect after adding the shadow radius attribute value.

   1:  .test{

2: box-shadow: 0px 0px 0px 5px red;/* set the offset value and blur value to 0 for obvious effect. */

   3:  }

As mentioned earlier,

If only the offset values on the X and Y axes are set, the shadow size is the size of the original container.

After the shadow radius is set, the shadow size is actually to keep the center unchanged and increase and spread to four aspects based on the original size. In this example, it is set to 5px. The actual effect is that the shadow increases by 5px to four directions.

Now we will introduce the last property value: Shadow type.

This parameter is also optional,

If no value is set, the default projection method is external shadow;

If you set a value, you can only set it to a unique value: inset. Change the projection method to inner shadow;

When the shadow type is set to inset, there is a slight difference in the offset values of X and Y axes.

   1:  .test{

2: box-shadow: inset 10px 10px 0px 0px red;/* offset values are all positive values */

   3:  }

   1:  .test{

2: box-shadow: inset-10px-10px 0px 0px red;/* The offset value is negative */

   3:  }

Offset on the X axis: When the value is positive, the shadow is on the left; when the value is negative, the shadow is on the right.

Offset on the Y axis: When the value is positive, the shadow is above; when the value is negative, the shadow is below.

At the same time, box-shadow also supports multiple shadow effects.

To display multiple shadows on an element, you only need to use commas to separate each shadow.

   1:  .test{

   2:      box-shadow: 0px 0px 0px 5px red,

   3:                  0px 0px 0px 10px green,

   4:                  0px 0px 0px 15px blue,

   5:                  0px 0px 0px 20px yellow;

   6:  }

At the same time, pay attention to the order of shadow addition, which will affect the shadow level (I think it is like the z-index in css ).

Each shadow can be viewed as a container projection. The hierarchy is reduced in order of writing. In this example, the first write is the Red Shadow, so it has the highest level; the last write is the yellow shadow, so it is placed at the bottom. If you try to increase the radius of the Red Shadow, you will find that the Red Shadow will overwrite all other shadows.

Conclusion:

Box-shadow provides many parameters, so different parameters can be cleverly matched with different effects. I have learned so much about box-shadow.

Error. please correct me!