CSS3 实现特殊阴影 (学习笔记)

             1
            <
            body
            >
             2
            <
            div 
            class
            ="wrap effect"
            >
             3
            <!--
             effect类:是阴影类,其他元素也可以使用 
            -->
             4
            <
            h1
            >Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>

             1
            /*
            通用类
            */
             2
            body { font-family: Arial; font-size: 20px;}
 3body,ul {margin: 0; padding: 0; list-style: none;}
 4.wrap {width:70%; height:200px; margin:50px auto; background: #fff; }
 5.wrap h1 {font-size: 20px; text-align: center; line-height: 200px; }
 6 7/*弧度阴影*/ 8.effect { 
 9    position: relative;
10    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
11    0 0 10px rgba(0,0,0,0.1) inset; 
12/*添加一个范围=4px的小阴影;再添加一个范围=10px的内阴影;*/13 }
14.effect:before,.effect:after {
15    content: ‘‘;
16    background: #f00;
17    position: absolute;
18    z-index: -2;
19    top:50%; bottom:0; left:30px; right:30px;
20/*设置四个方向值,然后浏览器自动计算盒子的大小;*/21    box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
22/*设置添加的盒子的阴影;*/23    border-radius: 100px/10px;
24/*添加圆角:水平方向圆角大小是100px/垂直方向圆角大小是10px;*/25 }
2627/*翘边阴影*/28.box{
29    width:980px;
30    height:auto;
31    clear:both;
32    overflow:hidden;
33    margin:20px auto;
34 }
35.box li{
36    position: relative;
37/*以li为定位基准;*/38    width:300px;
39    height:210px;
40    float:left;
41    background: #fff;
42    margin:20px 10px;
43    border:2px solid #efefef;
44    box-shadow: 0px 1px 4px rgba(0,0,0,0.27);
45/*给li添加一个小小的阴影;*/46 }
47.box li img {
48    display: block;
49    width:290px;
50    height:200px;
51    margin:5px;
52 }
53.box li:before{
54    content: ‘‘;
55    position: absolute;
56    z-index: -3;
57    width:90%;
58    height:80%;
59    left:18px;
60    bottom:8px;
61    box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
62    transform:skew(-12deg) rotate(-4deg);
63/*图形向右倾斜12度;并逆时针旋转4度;*/64 }
65.box li:after{
66    content: ‘‘;
67    position: absolute;
68    z-index: -4;
69    width:90%;
70    height:80%;
71    right:18px;
72    bottom:8px;
73    box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
74    transform:skew(12deg) rotate(4deg);
75/*图形向左倾斜12度;并顺时针旋转4度;*/76 }

             1
            1.box-shadow--添加一个或多个阴影

             2
                >1.功能:box-shadow--添加一个或多个阴影;

             3
                >2.语法:box-shadow:h-shadow v-shadow blur spread color inset;

             4
                >3.参数:

             5
                    >>:h-shadow(必需):水平阴影的位置;允许负值;

             6
                    >>:v-shadow(必需):垂直阴影的位置;允许负值;

             7
                    >>:blur(可选):模糊距离;

             8
                    >>:spread(可选):阴影的尺寸;

             9
                    >>:color(可选):阴影的颜色;

            10
                    >>:inset(可选):将外部阴影(outset)改为内部阴影;

            11
                >4.浏览器:IE9+/FF4

            12
            13
            2.:before与:after 

            14
                >1.:before选择器:在被选元素的内容前面插入内容;

            15
                >2.:after选择器:在被选元素的内容后面插入内容;

            16
                >3.说明:需要使用content属性来指定要插入的内容;

            17     >4.浏览器:IE8及更早版本中的:after,必须使用<!DOCTYPE>;
18193.transform--
20    >1.功能:向元素应用2D或3D转换
21    >1.语法:transform:none | transform-functions
22    >2.参数:
23        >>:skew(x-angle,y-angle):定义沿着X和Y轴的2D倾斜转换;
24        >>:skewX(angle):定义沿着X轴的2D倾斜转换;
25         >>:skewY(angle):定义沿着Y轴的2D倾斜转换;