再读《精通css》08：阴影

最新推荐文章于 2025-09-12 15:58:40 发布

转载最新推荐文章于 2025-09-12 15:58:40 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/laichendong/blog/283817

文章标签：

#python

本文介绍如何使用CSS为图片创建阴影效果，包括通过背景图片、负边距及相对定位实现阴影，以及利用半透明PNG遮罩改善阴影过渡。讨论了不同方法的优缺点，并提供了示例代码。

2019独角兽企业重金招聘Python工程师标准>>>

                3.3 阴影
对img-wrapper使用阴影图片作为背景，再用负的空白边移动图片，造成阴影的效果。这涉及到一些细节问题在注释上体现
<div class="img-wrapper"><img src="dunstan.jpg" width="300"?
height="300" alt="Dunstan Orchard" /></div>
.img-wrapper {
   background: url(images/shadow.gif) no-repeat bottom right;
   clear: right;/*为什么要加这个浮动？和设置了float：left有关？*/
   float: left;/*设置float属性可产生“收缩包围的效果”*/
   position: relative;/*修复IE6下的bug*/
}
.img-wrapper img {
   background-color: #fff;
   border: 1px solid #a9a9a9;
   padding: 4px;/*让边框和图片有4px的空间，为了美观*/
   display: block;/*修复IE6下的bug*/
   margin: -5px 5px 5px -5px;/*设置使图片像左上角移动5个像素*/
   position: relative;/*修复IE6下的bug*/
}

依然使用上面的方法，但不使用负的margin，而是对图片使用相对定位。一样可以达到相同的效果：
.img-wrapper {
   background: url(images/shadow.gif) no-repeat bottom right;
   float:left;
   line-height:0;
}
.img-wrapper img {
   background:#fff;
   padding:4px;
   border:1px solid #a9a9a9;
   position:relative;/*用相对定位和设置left，top的值来偏移图片*/
   left:-5px;
   top:-5px;
}

对于上面的方法。追求完美的人会说在阴影开始的地方有点生硬，解决办法是在加一个div，在这个div上运用一个半透明的png做遮罩，就可以了。但郁闷的IE6又不支持png半透明。所以要用gif图片代替。代码如下：
<div class="img-wrapper">
   <div>
       <img src="dunstan.jpg" width="300" height="300" alt="Dunstan" />
   </div>
</div>
.img-wrapper {
   background: url(images/shadow.gif) no-repeat right bottom;
   float: left;
}
.img-wrapper div {
   background: url(images/mask.png) no-repeat left top !important;
   background: url(images/mask.gif) no-repeat left top;/*IE6不认识！important，所以会执行这条规则*/
   padding: 0 5px 5px 0;
}
.img-wrapper img {
   background-color: #fff;
   border: 1px solid #a9a9a9;
   padding: 4px;
}
权衡问题的大小和解决问题所引入的复杂度。我觉得完全没有必要去这么做。往往为了20%的完美要付出80%的代价！

同样书中介绍的最后一种方法——洋葱皮阴影。也是添加了额外的复杂度。在这里就不介绍了。但在代码下载里有实现，相信一看就明白了吧。
完整实例代码

转载于:https://my.oschina.net/laichendong/blog/283817