用CSS3.0实现独特相册
在这里，我们使用基本的CSS样式来制作照片库，其中加上一些额外的阴影和旋转效果，然后使用?Z -index?属性来改变所有对象的堆叠顺序。因为我们使用的是CSS3.0，所以使用IE浏览器的用户不能看到完整的效果，但完全支持Firefox和Safari浏览器。
?
?
#container { width: 600px; margin: 40px auto; }
背景是重复的木质纹理图片，container中是主要内容，包括文字和照片。
HTML代码<ul /></li> <li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" alt="用CSS3.0兑现独特相册" height="329" width="400" style="background-color: #f0f0f0; border-right-width: 1px; border-right-style: solid; border-right-color: #aaaaaa; padding: 8px; margin: 0px;">CSS代码ul.gallery li a { float: left; padding: 10px 10px 25px 10px; background: #eee; border: 1px solid #fff; -moz-box-shadow: 0px 2px 15px #333; position: relative;}给图像添加一些样式来表现相册效果。首先靠左浮动叠排起来，每张照片设置内补丁，浅灰色背景。1px的白色边框非常微妙，显的边缘更亮，有光线凹凸感。
使用CSS3阴影?属性给照片添加一些阴影，以实现照片的真实感。为确保照片的堆叠顺序，我们还需要添加相对位置属性。
CSS代码ul.gallery li a.pic-1 { z-index: 1; -webkit-transform: rotate(-10deg);/*适于safari*/ -moz-transform: rotate(-10deg);/*适于火狐*/}ul.gallery li a.pic-2 { z-index: 5; -webkit-transform: rotate(-3deg);/*适于safari*/ -moz-transform: rotate(-3deg);/*适于火狐*/}ul.gallery li a.pic-3 { z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);}给各个照片指定不同的?Z-index?和旋转属性。一叠照片现在相互重叠的随机出现在木制板表面上 。
CSS代码
ul.gallery li a:hover { z-index: 10; -moz-box-shadow: 3px 5px 15px #333;}调整Z-index到一个更高的数字，确保每一张照片在鼠标点击时跳转到堆栈的顶部。
同时调整阴影。点击查看相册效果?
转自鹭鹭设计
CSS代码