CSS3盒子阴影(box-shadow)

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

发表评论

邮箱地址不会被公开。

微信