CSS3中新增了盒子阴影，我们可以使用 box-shadow属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset; /*1px 2px 3px 4px rgba(0,0,0,.3) inset*/| 值 | 描述 |
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置，允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影（outset）改为内部阴影。 |
注意：最后一个值，默认是外阴影outset，但outset不能写，写就错误。要么不写，要么只能写inset
鼠标经过盒子出现阴影效果
只需要在盒子添加以下样式即可实现，鼠标经过盒子出现阴影效果。
div:hover {
box-shadow: 1px 2px 3px 4px rgba(0,0,0,.3) inset;
}版权声明：本文为本站原创文章，由37.2℃发表，转载请注明出处，保留一切权利！
转载请注明：转载于37.2度云笔记
微信扫一扫 