box-shadow：营造层次感（立体感）、充当没有宽度的边框、特殊效果（无限投影的方式作画等）
<style> #box{ width: 200px; height: 200px; background: #ff0000; margin: 100px auto; /*参数：x方向偏移 y方向偏移 模糊区域 扩展区域 颜色*/ box-shadow: 15px 15px 10px 0px rgba(0,0,0,.5); } </style> </head> <body> <div id="box"></div> </body>
<style> #box{ width: 200px; height: 200px; background: #ff0000; margin: 100px auto; /*参数：inset内阴影 x方向偏移 y方向偏移 模糊区域 扩展区域 颜色*/ box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,.5); } </style> </head> <body> <div id="box"></div> </body>
