H5C3--边框阴影box-shadow

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         body {
12             margin: 0;
13             padding: 0;
14             background-color: #F7F7F7;
15         }
16 
17         img {
18             width: 100%;
19             display: block;
20         }
21 
22         .items {
23             padding: 30px;
24             overflow: hidden;
25         }
26 
27         .item {
28             width: 200px;
29             height: 200px;
30             padding-bottom: 100px;
31             margin-right: 30px;
32             border: 1px solid #CCC;
33             background-color: #FFF;
34             float: left;
35         }
36         /*添加阴影：
37         spread:设置阴影的扩散
38         inset:设置阴影为内阴影
39         box-shadow:offsetX offsetY blur spread color inset*/
40 
41         /*需求：获取前四个item元素*/
42         .item:nth-of-type(-n + 4){
43             box-shadow: 3px 3px 3px 0px #ccc;
44         }
45         .item:nth-last-of-type(1){
46             box-shadow: 3px 3px 3px 0px #ccc inset,-3px -3px 3px 0px #ccc inset;
47         }
48     </style>
49 </head>
50 <body>
51 <div class="items">
52     <div class="item">
53         <img src="../images/pk1.png">
54     </div>
55     <div class="item">
56         <img src="../images/pk2.png">
57     </div>
58     <div class="item">
59         <img src="../images/pk3.png">
60     </div>
61     <div class="item">
62         <img src="../images/pk1.png">
63     </div>
64     <div class="item"></div>
65 </div>
66 
67 </body>
68 </html>