—————————————————————- First To create the effect, you first need to apply your shadow graphic to the background of the wrapper div. Because divs are block-level elements, they stretch horizontally, taking up all the available space. In this situation we want the div to wrap around the image. You can do this by explicitly setting a width for the wrapper div, but doing so reduces the usefulness of this technique. Instead, you can float the div, causing it to “shrink-wrap” on modern browsers, with one exception: IE 5.x on the Mac. .img-wrapper { background: url(shadow.gif) no-repeat bottom right; clear: right; float: left; } To reveal the shadow image and create the drop shadow effect (see Figure 3-13), you need to offset the image using negative margins: .img-wrapper img { margin: -5px 5px 5px -5px; } [html]
第一步的效果在FF，Opera下看是正常的，IE下会有空白 [/html]
经过第一步已经实现了图片阴影效果，但是还不完善，接下来还是要继续修饰
第二步、逼真照片边框效果 现在给图片加上边框和内补白，就可以创建一个非常好的，以假乱真的照片边框效果 Second You can create a good, fake photo border effect by giving the image a border and some padding [code].img-wrapper img { background-color: #fff; border: 1px solid #a9a9a9; padding: 4px;
精品推荐
