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度云笔记