How to auto Scale Image Shadow: shrink-wraps

First, let's look at a simple example:

Test 1

HTML code:

1 <Div style = "background-color: Gray;"> Test 1 </div>

 

Now we add the float attribute to CSS in the above example, and you will find some small changes. Maybe you think this is okay, the theme to be discussed today is derived from this small change;

Test 2

HTML code:

1 <Div style = "background-color: Gray; float: Left;"> Test 2 </div>

 

Now you can see that the DIV in Test 2 is automatically scaled as your content increases. Ah, yes... what is the effect of applying this effect to the background shadow?

1. You do not need to set a fixed width for the DIV of the package.

2. Automatic Adjustment Based on the image size

Abstract: CSS mastery

CSS code:

1. IMG-wrapper {}{
2 Background: URL (images/shadow.gif) No-repeat bottom right;
3 clear: both;
4 float: left;
5 position: relative;
6 margin: 10px 0 0 10px;
7}
8
9. IMG-wrapper IMG {}{
10 background-color: # FFF;
11 border: 1px solid # a9a9a9;
12 padding: 4px;
13 display: block;
14 margin:-5px 5px 5px-5px;
15 position: relative;
16} HTML code:

1 <Div class = "IMG-wrapper"> </ div>