box-shadow单边阴影写法
box-shadow是css3属性,用于向框添加一个或多个阴影,ie9+以及火狐、chrome、opera均兼容。
操作方法
- 01
语法: 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>
- 02
水平阴影可以理解为偏左右哪个方向,如果加入inset,正数偏左,负数偏右,如果没有inset,正数偏右,负数偏左; 垂直阴影可以理解为偏上下哪个方向,如果加入inset,正数偏上,负数偏下,,如果没有inset,正数偏下,负数偏上; 总之,inset属性让水平、垂直阴影的方向与没有inset时相反。
- 03
如果只要实现单侧阴影,就得牺牲掉模糊效果,因为一旦模糊,颜色会扩散,效果会不明显。因为阴影从本质上来说是一个颜色快
- 04
0 -10px 0 0 设置上方单边阴影; 10px 0 0 0 设置右侧单边阴影;
赞 (0)