盒子模型——盒子阴影box-shadow

盒子模型——盒子阴影 box-shadow

语法：

box-shadow： inset x-offset y-offset blur-radius color；

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

x-offset ：必需。水平阴影的位置。允许负值。
y-offset ：必需。垂直阴影的位置。允许负值。
blur-radius ：可选。模糊距离。
color ：可选。阴影的颜色。
inset ：可选。将外部阴影 (outset) 改为内部阴影。
spread ：可选。阴影的尺寸。

虚阴影效果:
img{
height：300px；
-webkit-box-shadow：2px 2px 10px #fff；
box-shadow：2px 2px 10px #fff；
}

渐变阴影效果:
img{
height：300px；
-webkit-box-shadow：0 0 10px #fff；
box-shadow：0 0 10px #fff；
}

带光晕效果
img{
height：300px；
-webkit-box-shadow：0 0 10px 10px #fff；
box-shadow：0 0 10px 10px #fff；
}

内阴影效果
img{
height：300px；
-webkit-box-shadow：inset 5px 5px 10px #fff；
box-shadow：inset 5px 5px 10px #fff；
}

彩色阴影
img{
height：300px；
-webkit-box-shadow：0 0 10px red，
    2px 2px 10px 10px yellow，
    4px 4px 12px 12px green：
box-shadow：0 0 10px red，
       2px 2px 10px 10px yellow，
       4px 4px 12px 12px green；
}