H5C3--邊框陰影box-shadow
阿新 • • 發佈：2018-01-13
inf doctype pad block html div eight 添加 nth
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>
H5C3--邊框陰影box-shadow