在线客服 官方微信 手机官网RSS订阅 设为首页  加为收藏
主题:用CSS给图片加阴影的两种方法
 楼主 wme8128 发表于2010-12-27 9:50:05
用CSS给图片加阴影的两种方法

一、用图片制作阴影效果

img {

         background: url(img-shadow.png) no-repeat right bottom;

         padding: 7px 11px 12px 7px;

}

一般来说我们比较接受光从左上角打过来,在右下角形成阴影的状态。所以我做了一张1000 x 1000像素的图片,图片的右边、下边分别有一块大概5像素的阴影部分。因为背景图片很大,所以1000像素以下的图片都可以用这张背景图来做阴影。

二、用CSS边框模拟阴影效果

CSS如下:

img {

         background: #f8f8f8;

         border-top:1px solid #ccc;

         border-right:1px solid #666;

         border-bottom:2px solid #999;

         border-left:1px solid #ccc;

         padding: 7px;

}

这两种方法都很简单,第一种图片方法可以把阴影做的更加柔和、第二种方法则更绿色、简单。 

 

 1 xhaoda 发表于2010-12-27 19:11:41

学习一下

奇新云平台
切换