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

2019-04-14 20:00发布

盒子模型——盒子阴影 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;
}