利用css3的部分效果制作简易电子相册：
常规部分：
body{
background-image:url(xx);
background-size:100%/*控制背景的大小，可取像素值也可取百分制*/
}
背景图案效果.png
制作边框的部分：
.xiangkang{
width:410px;
padding:10px 10px 20px 10px ;/*便于美观设计的距离，可以根据页面或需求修改*/
border:2px solid #bfbfbf;/*颜色根据或边框的风格根据喜好修改*/
box-shadow:4px 4px 4px #aaaaaa;/*添加阴影部分（css3）*/
}
初步边框效果.png
插入图片：
<div class="xiangkuang tupian1"><img src="xx" alt="xx.jpg">/*要两个div属性值*/
下面就是利用css3的旋转制造出效果：
.tupian1{
float:left;
-webkit-transform:rotate(7deg);/*IE9*/
-ms-transform:rotate(7deg);/*Firefox*/
-moz-transform:rotate(7deg);/*Safari and Chrome*/
-o-transform:rotate(7deg);/*Opera*/
transform:rotate(7deg);/*常规语法，前面几类针对不同的浏览器要考虑到兼容性的问题*/
}
左旋转.png
于是左边的大图就制作完了。
类似的右边：
.tupian1{
float:left;
-webkit-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
transform:rotate(-8deg);
}
正面.png
（可用position属性对位置进行调整）
对于右边部分可以增加一些元素：
右边.png
.r{
float:right;/*让图片右浮动*/
margin-right:10px;/*分离每一张图片让布局看起来美观*/
width:auto;/*便于鼠标移动到图片时边框不受影响*/
border:2px solid #bfbfbf;
box-shadow:4px 4px 4px #aaaaaa;
}
当鼠标移动到右边的小图时，可以将图片进行放大观察处理：
div.r img:hover{/*针对Div中的图片（img）进行一个hover操作*/
width:200px;
height:200px;
}
当鼠标移动到图片时就会产生此类效果。
效果.png
