来自clagnut的投影方法

最新推荐文章于 2021-06-18 08:54:04 发布

转载最新推荐文章于 2021-06-18 08:54:04 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kerita/p/4870030.html

本文介绍了一种使用CSS实现图片投影的方法，通过设置图片的left和top属性为负值使其产生偏移，同时运用line-height:0;使投影与边框重合，避免投影出现在边框下方。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>来自clagnut的投影方法</title>
    <style>
        .img-wrapper{
            background: url(img/shadow.gif) no-repeat bottom right;
            float: left;
            line-height: 0px;
        }
        
        .img-wrapper img{
            background-color: #fff;
            border: 1px solid #a9a9a9;
            padding: 4px;
            position: relative;
            left: -5px;
            top: -5px;
        }
    </style>
</head>
<body>
<div class="img-wrapper">
    <img src="img/dunstan.jpg" alt="Dunstan Orchard"/>
</div>
</body>
</html>