在慕课网学习的小效果-图片阴影
这两种阴影效果实现思路都是在图片下面在加一个或者多个阴影来形成曲边或者翘边
效果预览：
第一个大图是曲线阴影
思路：在图片下面在加一个有曲边的阴影，阴影太浅我们可以在下面加两个阴影。
原理图：
这个红色的方块就是阴影块，这样只是为了说明原理，我们可以给他设置阴影并把它藏到图片下便可以实现曲边阴影。
代码：
1 .effect:after,.effect:before{ 2 /* 3 :after 选择器在被选元素的内容后面插入内容。 4 请使用 content 属性来指定要插入的内容。 5 :before 选择器在被选元素的内容前面插入内容。 6 请使用 content 属性来指定要插入的内容。 7 */ 8 content:''; 9 z-index: -1; 10 position: absolute; 11 top: 50%; 12 bottom: 0; 13 left: 15px; 14 right: 15px; 15 background:#f00; 16 box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 17 -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 18 -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 19 -o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 20 /* 21 border-radius: 1-4 length|% / 1-4 length|%; 22 注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。 23 如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。 24 length 定义圆角的形状。 测试 25 % 以百分比定义圆角的形状。 26 */ 27 border-radius: 100px/10px; 28 }
因为两个阴影:after和:before只是为了加深阴影，位置都一样所以都写在一起。
下面三个图是翘边阴影
思路：在图片下加两个旋转后的平行四边形
原理图：
和曲线图的思路大同小异，只不过将两个相反的平行四边形放到了图片下面
代码：
.box li:before{ content: ''; position: absolute; width: 91%; height: 80%; left: 10px; bottom: 8px; z-index: -3; background-color: transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); /*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/ -webkit-transform:skew(12deg) rotate(4deg); -moz-transform:skew(12deg) rotate(4deg); -o-transform:skew(12deg) rotate(4deg); -ms-transform:skew(12deg) rotate(4deg); } .box li:after{ content: ''; position: absolute; width: 91%; height: 80%; right: 10px; bottom: 8px; z-index: -3; background-color:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.6); -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); /*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/ -webkit-transform:skew(-12deg) rotate(-4deg); -moz-transform:skew(-12deg) rotate(-4deg); -o-transform:skew(-12deg) rotate(-4deg); -ms-transform:skew(-12deg) rotate(-4deg); }
由于这两个平行四边形的位置不一样，所以我们需要分别设置。
最后附上所有代码
HTML：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>textPictureShadow</title> 6 <link type="text/css" rel="stylesheet" href="css/styleTest.css" > 7 </head> 8 <body> 9 <!-- 单独设置effect是为了更好的重复使用，阴影特效加在effect上 --> 10 <div class="wrap effect" > 11 <h1>Shadow Effect</h1> 12 </div> 13 <ul class="box"> 14 <li> 15 <img src="images/photo1.jpg"> 16 </li> 17 <li> 18 <img src="images/photo2.jpg"> 19 </li> 20 <li> 21 <img src="images/photo3.jpg"> 22 </li> 23 </ul> 24 </body> 25 </html>
CSS：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 body{ 6 font-family: Arial; 7 font-size: 20px; 8 list-style: none; 9 } 10 .wrap{ 11 width: 70%; 12 height:200px; 13 margin: 50px auto; 14 background:#fff; 15 } 16 .wrap h1{ 17 text-align: center; 18 line-height: 200px; 19 } 20 .effect{ 21 /*box-shadow: h-shadow v-shadow blur spread color inset; 22 23 h-shadow 必需。水平阴影的位置。允许负值。 24 v-shadow 必需。垂直阴影的位置。允许负值。 25 blur 可选。模糊距离。 26 spread 可选。阴影的尺寸。 27 color 可选。阴影的颜色。请参阅 CSS 颜色值。 28 inset 可选。将外部阴影 (outset) 改为内部阴影。 29 */ 30 /* //Firefox4.0- 31 32 -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; 33 34 //Safari and Google chrome10.0- 35 36 -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; 37 38 //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 39 40 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; 41 42 //Opera 43 44 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; 45 46 */ 47 position: relative; 48 box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 50px rgba(0,0,0,0.1) inset; 49 -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 50px rgba(0,0,0,0.1) inset; 50 -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 50px rgba(0,0,0,0.1) inset; 51 -o-box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 50px rgba(0,0,0,0.1) inset; 52 } 53 .effect:after,.effect:before{ 54 /* 55 :after 选择器在被选元素的内容后面插入内容。 56 请使用 content 属性来指定要插入的内容。 57 :before 选择器在被选元素的内容前面插入内容。 58 请使用 content 属性来指定要插入的内容。 59 */ 60 content:''; 61 z-index: -1; 62 position: absolute; 63 top: 50%; 64 bottom: 0; 65 left: 15px; 66 right: 15px; 67 background:#f00; 68 box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 69 -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 70 -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 71 -o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 72 /* 73 border-radius: 1-4 length|% / 1-4 length|%; 74 注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。 75 如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。 76 length 定义圆角的形状。 测试 77 % 以百分比定义圆角的形状。 78 */ 79 border-radius: 100px/10px; 80 } 81 .box{ 82 width: 980px; 83 height: auto; 84 clear: both; 85 overflow: hidden; 86 margin: 20px auto; 87 } 88 .box li{ 89 list-style-type: none; 90 position: relative; 91 width: 300px; 92 height: 210px; 93 float: left; 94 margin: 20px 10px; 95 border:2px solid #efefef; 96 background-color: #fff; 97 box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 10px rgba(0,0,0,0.1) inset; 98 -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27), 0 0 10px rgba(0,0,0,0.1) inset; 99 -moz-box-shadow:0 1px 4px rgba(0,0,0,0.27), 0 0 10px rgba(0,0,0,0.1) inset; 100 -o-box-shadow:0 1px 4px rgba(0,0,0,0.27), 0 0 10px rgba(0,0,0,0.1) inset; 101 } 102 .box li img{ 103 display: inline-block; 104 width: 290px; 105 height: 200px; 106 margin: 5px; 107 } 108 .box li:before{ 109 content: ''; 110 position: absolute; 111 width: 91%; 112 height: 80%; 113 left: 10px; 114 bottom: 8px; 115 z-index: -3; 116 background-color: transparent; 117 box-shadow: 0 8px 20px rgba(0,0,0,0.6); 118 -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 119 -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 120 -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 121 /*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/ 122 -webkit-transform:skew(12deg) rotate(4deg); 123 -moz-transform:skew(12deg) rotate(4deg); 124 -o-transform:skew(12deg) rotate(4deg); 125 -ms-transform:skew(12deg) rotate(4deg); 126 } 127 .box li:after{ 128 content: ''; 129 position: absolute; 130 width: 91%; 131 height: 80%; 132 right: 10px; 133 bottom: 8px; 134 z-index: -3; 135 background-color:transparent; 136 box-shadow: 0 8px 20px rgba(0,0,0,0.6); 137 -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 138 -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 139 -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); 140 /*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/ 141 -webkit-transform:skew(-12deg) rotate(-4deg); 142 -moz-transform:skew(-12deg) rotate(-4deg); 143 -o-transform:skew(-12deg) rotate(-4deg); 144 -ms-transform:skew(-12deg) rotate(-4deg); 145 }