css2.1实现图片添加阴影效果

盒子里面放了img标签，盒子浮动后，盒子的背景图片（就是阴影图片）会应用图片的宽高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 核心技术就是float:left ,clear:right,
        盒子脱离文挡流后，背景图片会应用盒子的高度*/
        .shadow{
            border: 1px solid red;
            background: url('img/shadow.gif') no-repeat bottom right;
            /* margin: 5px; */
            float: left;
            clear: right;
        }
        .shadow img{
            display: block;
            width: 300px;
            height: 300px;
            /* 向左上角偏移5px */
            /* margin: -5px 5px 5px -5px; */
            /* 或者使用相对定位 */
            position: relative;
            top: -5px;
            left: -5px;
            /* border: 1px solid red;
            padding: 4px; */
        }
    </style>
</head>
<body>
    <div class="shadow">
        <img src="img/dunstan.jpg">
    </div>
</body>
</html>

为了显示效果明显，我给背景图案加了边框，只要图片大小不超过背景图片都能实现阴影边框，演示地址：http://down.yesyes.wang/book/04/shadow.html

posted @ 2016-12-15 17:08  wmui  阅读(2109)  评论(0)  编辑  收藏  举报