Application techniques of shadow effect Box-shadow in CSS

Application Tip one: Offset and ligatures

We can use the Box-shadow offset effect to write the moving End navigation button "Three staves", the following figure:

We are using the Box-shadow and ligatures! What is ligatures? Is that we can write multiple Box-shadow and use "," for segmentation. Achieve a different effect!

The three-bar code is written as follows:

. sdg{width:45px;height:45px;line-height:2.6;border:1px solid #fff;}
. Sdg::before{content: "Width:20px;height:2px;background: #fff;d isplay:inline-block;box-shadow:0 7px 0 #fff, 0-7px 0 #fff;}

The above code, we use a pseudo element, write the middle of a bar, and then with box-shadow:0 7px 0 #fff, 0-7px 0 #fff; Write the two poles above and below, offset by 7px respectively.

Application Tips Two: multiple borders

This multiple border, I am referring to the "Secrets of the CSS" in this book the multiple border effect.

The following effects:

Code believe you can see that using Box-shadow to achieve multiple borders is very simple!

The core code is as follows:

Background:yellowgreen;
box-shadow:0 0 0 10px #665,
0 0 0 15px deeppink,
0 2px 5px 15px rgba (0,0,0,.6);

Want to write a few borders, use comma ligatures a few, use up very convenient!

In addition, the book introduces, you can also use Outline (stroke) scheme for multiple border writing, and the use of Box-shadow and outline for the border inside the round corner of the writing! I don't have much to introduce here! Need to know more, suggest to go to a friend over there to get a "secret of CSS" read!

Some classmates asked, box-shadow I commonly used on the four attribute values AH (horizontal projection, vertical projection, fuzzy value, and color) how the top out of five properties!

Yes, Box-shadow's syntax is as follows:

Box-shadow:h-shadow v-shadow blur spread color inset;

It has six property values, the first two must be filled in, and the following are optional. The fourth value is the shadow dimension, which is to use this value to make a multiple border!

The sixth attribute, inset and outset, is an internal shadow and an external shadow, and the default is an external shadow. The relevant application techniques for Box-shadow are written here. Hope to be helpful to everybody!