H5C3--边框阴影box-shadow
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于H5C3--边框阴影box-shadow的主要内容，如果未能解决你的问题，请参考以下文章
边框阴影 模糊值 x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect，其中阴影半径可以为负值，意思是增加或减少指定数值的阴影半径