图片曲边阴影和翘边阴影

在慕课网学习的小效果-图片阴影

这两种阴影效果实现思路都是在图片下面在加一个或者多个阴影来形成曲边或者翘边

效果预览：

第一个大图是曲线阴影

思路：在图片下面在加一个有曲边的阴影，阴影太浅我们可以在下面加两个阴影。

原理图：

这个红色的方块就是阴影块，这样只是为了说明原理，我们可以给他设置阴影并把它藏到图片下便可以实现曲边阴影。

代码：

 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 }

 

posted @ 2016-11-02 20:27  老板丶鱼丸粗面  阅读(517)  评论(0)  编辑  收藏  举报