盒子模型——盒子阴影 box-shadow
语法:
box-shadow: inset x-offset y-offset blur-radius color;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜 {MOD}值以及可选的 inset 关键词来规定。省略长度的值是 0。
x-offset :必需。水平阴影的位置。允许负值。
y-offset :必需。垂直阴影的位置。允许负值。
blur-radius :可选。模糊距离。
color :可选。阴影的颜 {MOD}。
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;
}
彩 {MOD}阴影
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;
}