尽管CSS3仍处于发展阶段，却是新的热潮，令许多网站开发者感到兴奋。 CSS3 将带来新的更大的网络发展，实现网页设计的与时俱进，让网页设计师和开发人员的创造力得到充分展现。 CSS3增加了许多新特性 如：文本阴影，圆形边界，动画，自定义网页字体，等等。 甚至有他们不少人认为一旦所有浏览器都支持CSS3 它将取代JavaScript的动画特效。 下面是一个CSS3图片相册的编写过程：

HTML结构

首先，我们将创建如下结构。 第一个图像是类名“mini”，第二个是时显示的图片与类名“pic”。

<div id="gallery">
    <ul>
        <li> <img src="images/imagen1_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen1.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen2_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen2.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen3_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen3.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen4_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen4.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen5_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen5.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen6_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen6.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen7_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen7.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen8_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen8.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen9_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen9.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen10_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen10.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen11_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen11.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen12_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen12.jpg" class="pic"  /> </li>
     </ul>
</div>
CSS样式


第二部用到CSS3的属性box-shadow.




#gallery {
    border: 10px solid #1D0C16;
    height: 300px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background: #272229;
    /*box shadow effect in Safari and Chrome*/
    -webkit-box-shadow: #272229 10px 10px 20px;
    /*box shadow effect in Firefox*/
    -moz-box-shadow: #272229 10px 10px 20px;
    /*box shadow effect in IE*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
    /*box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
     box-shadow: #272229 10px 10px 20px;
}






#gallery ul{
    /* This position the ul content in the middle of the gallery*/
    margin-left:-30px; 
}


/* This create the desired effect of showing the image when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
   width:200px; 
   height:200px;
   opacity:1; 
   visibility:visible; 
   float:right;
}


具体代码可以右键“查看源代码”啦。


演示地址：http://a.kainy.cn/201003/css3相册-www.kainy.cn/index.html


下载代码：http://a.kainy.cn/201003/css3相册-www.kainy.cn.zip