操作方法
语法： box-shadow: h-shadow v-shadow blur spread color inset; (box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内部阴影;) 水平阴影、垂直阴影值必填，其余值可选； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3属性</title> <style type="text/css"> div.a { width: 200px; height: 200px; margin: 20px auto; border: 1px solid #CCCCCC; box-shadow: 10px 20px 10px 10px #f00; } </style> </head> <body> <div class="a"></div> </body> </html>
水平阴影可以理解为偏左右哪个方向，如果加入inset，正数偏左，负数偏右，如果没有inset，正数偏右，负数偏左； 垂直阴影可以理解为偏上下哪个方向，如果加入inset，正数偏上，负数偏下，，如果没有inset，正数偏下，负数偏上； 总之，inset属性让水平、垂直阴影的方向与没有inset时相反。
如果只要实现单侧阴影，就得牺牲掉模糊效果，因为一旦模糊，颜色会扩散，效果会不明显。因为阴影从本质上来说是一个颜色快
0 -10px 0 0 设置上方单边阴影； 10px 0 0 0 设置右侧单边阴影；