Simple and Easy-to-change CSS shadow effect

Tired of adding border decoration to each image on the image processing software? Let CSS help you! Hey, let's take a look at the following images. It's very convenient, isn't it?

Text block Application Effect Narrow

This is the text that goes in the middle.

Medium

Another box that has a bit more text so that the box will be taller and the shadow stretches to suit.

Wide

One more text box that has a lot more text so that the box will be even taller and the shadow will still shadow to suit. the shadow color can be matched to the background and can also be positioned to the left or right.

Inner Shadow Medium

And finally a text box with a surround shadow.

Code Analysis

HTML section

 
Lt; Div class = "out narrow">
<Div class = "in ltin tpin">
<H2> narrow </H2>
<P> This is the text that goes in the middle. </P>
</Div>
</Div>
<! -- The above is only the HTML code of the first text block, but the principle is similar to other ones. The class value in it has spaces, if the style of the latter is different from that of the former, use the style of the latter -->
 

CSS code

. Out {
Display: block;
Background: # BBB;
Border: 1px solid # DDD;
Position: relative;
Margin: 1em 0;
}/* Set the outer frame (background, border, and positioning )*/
. In2 {
Display: block;
Background: #777;
Border: 1px solid #999;
Position: relative;
Padding: 1px;
Margin: 1px;
}
. In {
Text-align: center;
Background: # FFF;
Border: 1px solid #555;
Position: relative;
Padding: 5px;
Font-weight: normal;
}/* Set the inner box */
 

 
. Ltin {
Left:-5px;
}
. Tpin {
Top:-5px;
}
. Rtin {
Left: 5px;
}/* Shift the inner frame, and the background color of the outer frame becomes a shadow */
 

Apply on Images