Box-shadow and box-shadow

Box-shadow and box-shadow
Box-shadow

Box-shadow is defined as follows: "The box-shadow attribute adds one or more shadows to the box. "

Yes, like his name, this attribute is certainly used to create a shadow effect to make the page more stereoscopic.

Syntax:

Box-shadow:H-shadow V-shadow Blur Spread ColorInset;

The attributes are:
H-shadow: required. The position of the horizontal shadow. Negative values are allowed.
V-shadow: required. The position of the vertical shadow. Negative values are allowed.
Blur: Optional. Fuzzy distance.
Spread: Optional. The shadow size.
Color: Optional. The color of the shadow. See CSS color values.
Inset: Optional. Change the external shadow (outset) to the internal shadow.

Browser support:
IE9 +, Firefox 4, Chrome, Opera, and Safari 5.1.1 support the box-shadow attribute.

I have learned a lot about the css3 "Image Shadow" effect class introduced by Amy on MOOC online, including curve shadow and tilted side shadow.
Link: http://www.imooc.com/learn/240

Curve shadow

Principle:

　Set a shadow for the element itself, use the befor and after pseudo classes to create elements, and set the same shadow for the pseudo classes, so that the three shadows overlap to achieve a cool shadow effect. (● 'Authorization' ●)

Code:

　　Html:

<Div class = "wrap effect">
<H1> shadow effect </Div>

Css:

. Wrap {
Width: 70%;
Height: 200px;
Margin: 50px auto;
Background: # fff;
}
. Wrap h1 {
Font-size: 20px;
Text-align: center;
Line-height: 200px;
}
. Effect {
Position: relative;
Box-shadow: 0px 1px 4px rgba (0.3, 0, 0.1), 0px 0px 40px rgba (, 0,) inset;
-Webkit-box-shadow: 0px 1px 4px rgba (0.3, 0, 0.1), 0px 0px 40px rgba (, 0,) inset;
-Moz-box-shadow: 0px 1px 4px rgba (0.3, 0, 0.1), 0px 0px 40px rgba (, 0,) inset;
-O-box-shadow: 0px 1px 4px rgba (0.3, 0, 0.1), 0px 0px 40px rgba (, 0,) inset;
}
. Effect: after,. effect: before {
Content :'';
Position: absolute;
Background: # fff;
Top: 50%;
Bottom: 0px;
Left: 10px;
Right: 10px;
Box-shadow: 0px 0px 20px rgba (0, 0, 0, 0.8 );
-Webkit-box-shadow: 0px 0px 20px rgba (0.8, 0 );
-O-box-shadow: 0px 0px 20px rgba (0.8, 0 );
-Moz-box-shadow: 0px 0px 20px rgba (0.8, 0 );
Border-radius: 100px/10px;
Z-index:-1;
}

Edges shadow

Principle:

　　Similar to the curve shadow, two pseudo classes are used to create the shadow effect, and transform is used to change the pseudo class shape into a parallelogram, with one left and one right direction respectively.

Code:

　　Html:

<Ul class = "box">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>

Css:

. Box li {
Width: 240px;
Height: 240px;
List-style: none;
Float: left;
Margin: 20px 10px;
Border: 2px solid # efefef;
Box-shadow: 0 1px 4px rgba (0, 0, 0, 0.27 );
-Webkit-box-shadow: 0 1px 4px rgba (0.27, 0 );
-Moz-box-shadow: 0 1px 4px rgba (0.27, 0 );
-O-box-shadow: 0 1px 4px rgba (0.27, 0 );
Position: relative;
Background: # fff;
}
. Box li> img {
Display: block;
Margin: 11px;
}
. Box li: before {
Content :'';
Position: absolute;
Width: 90%;
Left: 20px;
Bottom: 10px;
Background: transparent;
Box-shadow: 0 8px 10px rgba (0,0, 0, 0.6 );
-Webkit-box-shadow: 0 8px 10px rgba (0.6, 0 );
-Moz-box-shadow: 0 8px 10px rgba (0, 0, 0, 0.6 );
-O-box-shadow: 0 8px 10px rgba (0, 0, 0, 0.6 );
Z-index:-1;
Transform: skew (-10deg) rotate (-7deg );
-Webkit-transform: skew (-10deg) rotate (-7deg );
-O-transform: skew (-10deg) rotate (-7deg );
-Moz-transform: skew (-10deg) rotate (-7deg );
-Ms-transform: skew (-10deg) rotate (-7deg );
}
. Box li: after {
Content :'';
Position: absolute;
Width: 90%;
Height: 80%;
Left: 20px;
Bottom: 10px;
Background: transparent;
Box-shadow: 0 8px 10px rgba (0,0, 0, 0.6 );
-Webkit-box-shadow: 0 8px 10px rgba (0.6, 0 );
-Moz-box-shadow: 0 8px 10px rgba (0, 0, 0, 0.6 );
-O-box-shadow: 0 8px 10px rgba (0, 0, 0, 0.6 );
Z-index:-1;
Transform: skew (10deg) rotate (7deg );
-Webkit-transform: skew (10deg) rotate (7deg );
-O-transform: skew (-10deg) rotate (7deg );
-Moz-transform: skew (10deg) rotate (7deg );
-Ms-transform: skew (10deg) rotate (7deg );
}

You can copy and paste the code, view the details of the elements, and directly open the course mentioned above.