2023年6月21日发(作者：)

box-shadow属性的详细描述和兼容性测试box-shadow是css3属性，⽤于向框添加⼀个或多个阴影，兼容ie9+以及⽕狐、chrome、opera等⼤部分主流浏览器。和PSD软件制作图⽚相⽐，box-shadow修改元素的阴影效果要简单得多，因为box-shadow可以修改六个参数，来获取不同的阴影显⽰效果。在前⾯⽂章已经做了阐述，有⽹友指出写的不够详细，下⾯是这个特别综合了常⽤的阴影案例对box-shadow属性进⾏演⽰说明，希望对这⽅⾯尤其⽋缺的朋友补补脑。开始的部分咱们先讲⼀下如何使⽤box-shadow设置阴影效果，下⾯部分再综合理清如何在不同的浏览器中使⽤，做到所有主流浏览器兼容(IE下兼容)。 box-shadow语法：

box-shadow: h-shadow v-shadow blur spread color inset;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] 阴影颜⾊ [投影⽅式]}

h-shadow：⽔平阴影的位置，正数则显⽰右侧阴影，负数显⽰左侧阴影。

v-shadow：垂直阴影的位置，正数则显⽰下侧阴影，负数显⽰上侧阴影。

blur：可选项，模糊距离，⽤来设置阴影边缘的模糊化程度。

spread：可选项，阴影的尺⼨，可放⼤或缩⼩阴影的尺⼨。

color：阴影的颜⾊，⽤来设置当前阴影的颜⾊。

inset：可选项，默认的阴影将外部阴影(outset)，添加此参数改为内部阴影。1.⽔平阴影案例解析⽔平阴影指的是⽔平向左或者向右的阴影，⽔平阴影的参数为正数则表⽰向右的⽔平阴影；⽔平阴影的参数为负数则表⽰向左的⽔平阴影；⽔平阴影的参数为0则表⽰没有⽔平阴影，下⾯是⽔平阴影的实际⽰例。.shadow_horizontal_right{

box-shadow:12px

0px

#888;}.shadow_horizontal_center{

box-shadow:0px

0px

#888;}.shadow_horizontal_left{

box-shadow:-12px

0px

#888;}提⽰：在CSS3中0px可以写成0，如box-shadow:0px 0px #888;何box-shadow:0 0 #888;是⼀样的2.垂直阴影案例解析垂直阴影指的是垂直向上或者向下的阴影，垂直阴影的参数为正数则表⽰向下的垂直阴影；垂直阴影的参数为负数则表⽰向上的垂直阴影；垂直阴影的参数为0则表⽰没有垂直阴影，下⾯是垂直阴影的实际⽰例。.shadow_vertical_bottom{

box-shadow:0px

12px

#888;}.shadow_vertical_center{

box-shadow:0px

0px

#888;}.shadow_vertical_top{

box-shadow:0px -12px

#888;}3.模糊距离的box-shadow阴影案例解析.shadow_right_bottom_blur{

box-shadow:12px

12px

5px

#888;}.shadow_right_top_blur{

box-shadow:12px -12px

5px

#888;}.shadow_left_bottom_blur{

box-shadow:-12px

12px

5px

#888;}.shadow_left_top_blur{

box-shadow:-12px -12px

5px

#888;}4.阴影尺⼨的box-shadow阴影案例.shadow_right_bottom_blur_spread_small{

box-shadow:12px

12px

5px -10px

#888;}.shadow_right_bottom_blur_spread{

box-shadow:12px

12px

5px

0px

#888;}.shadow_right_bottom_blur_spread_big{

box-shadow:12px

12px

5px

10px

#888;

margin-bottom:40px;}5.背景颜⾊的box-shadow阴影案例.shadow_right_bottom_color_gray{

box-shadow:12px

12px

#888;}.shadow_right_bottom_color_green{

box-shadow:12px

12px

#6dffb8;}.shadow_right_bottom_color_red{

box-shadow:12px

12px

#ef6160;}6.阴影透明度的box-shadow阴影⽰例.shadow_blur_spread_rgba{

box-shadow:0

0

5px

10px

rgba(0,0,0,.1);}提⽰：在CSS3中,rgba(0,0,0,1.0)为⿊⾊和#000⼀样，rgba(255,255,255,1.0)为⽩⾊和#fff⼀样。-shadow兼容性讲解上⾯写的box-shadow是在⾕歌浏览器上使⽤的。正常情况下，我们要让box-whadow兼容绝⼤多数主流浏览器（包括IE浏览器），这⾥开创者素材给⼤家提供了兼容主流浏览器的代码。.jianrong{

-webkit-box-shadow:

0px

0px

20px

#000;

-moz-box-shadow:

0px

0px

20px

#000;

-o-box-shadow:

0px

0px

20px

#000;

box-shadow:

0px

0px

20px

#000;

-webkit-border-radius:

10px;

-moz-border-radius:

10px;

-o-border-radius:

10px;

border-radius:

10px;

behavior:

url();/*兼容ie，加上这句*/}

2023年6月21日发(作者：)

box-shadow属性的详细描述和兼容性测试box-shadow是css3属性，⽤于向框添加⼀个或多个阴影，兼容ie9+以及⽕狐、chrome、opera等⼤部分主流浏览器。和PSD软件制作图⽚相⽐，box-shadow修改元素的阴影效果要简单得多，因为box-shadow可以修改六个参数，来获取不同的阴影显⽰效果。在前⾯⽂章已经做了阐述，有⽹友指出写的不够详细，下⾯是这个特别综合了常⽤的阴影案例对box-shadow属性进⾏演⽰说明，希望对这⽅⾯尤其⽋缺的朋友补补脑。开始的部分咱们先讲⼀下如何使⽤box-shadow设置阴影效果，下⾯部分再综合理清如何在不同的浏览器中使⽤，做到所有主流浏览器兼容(IE下兼容)。 box-shadow语法：

box-shadow: h-shadow v-shadow blur spread color inset;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] 阴影颜⾊ [投影⽅式]}

h-shadow：⽔平阴影的位置，正数则显⽰右侧阴影，负数显⽰左侧阴影。

v-shadow：垂直阴影的位置，正数则显⽰下侧阴影，负数显⽰上侧阴影。

blur：可选项，模糊距离，⽤来设置阴影边缘的模糊化程度。

spread：可选项，阴影的尺⼨，可放⼤或缩⼩阴影的尺⼨。

color：阴影的颜⾊，⽤来设置当前阴影的颜⾊。

inset：可选项，默认的阴影将外部阴影(outset)，添加此参数改为内部阴影。1.⽔平阴影案例解析⽔平阴影指的是⽔平向左或者向右的阴影，⽔平阴影的参数为正数则表⽰向右的⽔平阴影；⽔平阴影的参数为负数则表⽰向左的⽔平阴影；⽔平阴影的参数为0则表⽰没有⽔平阴影，下⾯是⽔平阴影的实际⽰例。.shadow_horizontal_right{

box-shadow:12px

0px

#888;}.shadow_horizontal_center{

box-shadow:0px

0px

#888;}.shadow_horizontal_left{

box-shadow:-12px

0px

#888;}提⽰：在CSS3中0px可以写成0，如box-shadow:0px 0px #888;何box-shadow:0 0 #888;是⼀样的2.垂直阴影案例解析垂直阴影指的是垂直向上或者向下的阴影，垂直阴影的参数为正数则表⽰向下的垂直阴影；垂直阴影的参数为负数则表⽰向上的垂直阴影；垂直阴影的参数为0则表⽰没有垂直阴影，下⾯是垂直阴影的实际⽰例。.shadow_vertical_bottom{

box-shadow:0px

12px

#888;}.shadow_vertical_center{

box-shadow:0px

0px

#888;}.shadow_vertical_top{

box-shadow:0px -12px

#888;}3.模糊距离的box-shadow阴影案例解析.shadow_right_bottom_blur{

box-shadow:12px

12px

5px

#888;}.shadow_right_top_blur{

box-shadow:12px -12px

5px

#888;}.shadow_left_bottom_blur{

box-shadow:-12px

12px

5px

#888;}.shadow_left_top_blur{

box-shadow:-12px -12px

5px

#888;}4.阴影尺⼨的box-shadow阴影案例.shadow_right_bottom_blur_spread_small{

box-shadow:12px

12px

5px -10px

#888;}.shadow_right_bottom_blur_spread{

box-shadow:12px

12px

5px

0px

#888;}.shadow_right_bottom_blur_spread_big{

box-shadow:12px

12px

5px

10px

#888;

margin-bottom:40px;}5.背景颜⾊的box-shadow阴影案例.shadow_right_bottom_color_gray{

box-shadow:12px

12px

#888;}.shadow_right_bottom_color_green{

box-shadow:12px

12px

#6dffb8;}.shadow_right_bottom_color_red{

box-shadow:12px

12px

#ef6160;}6.阴影透明度的box-shadow阴影⽰例.shadow_blur_spread_rgba{

box-shadow:0

0

5px

10px

rgba(0,0,0,.1);}提⽰：在CSS3中,rgba(0,0,0,1.0)为⿊⾊和#000⼀样，rgba(255,255,255,1.0)为⽩⾊和#fff⼀样。-shadow兼容性讲解上⾯写的box-shadow是在⾕歌浏览器上使⽤的。正常情况下，我们要让box-whadow兼容绝⼤多数主流浏览器（包括IE浏览器），这⾥开创者素材给⼤家提供了兼容主流浏览器的代码。.jianrong{

-webkit-box-shadow:

0px

0px

20px

#000;

-moz-box-shadow:

0px

0px

20px

#000;

-o-box-shadow:

0px

0px

20px

#000;

box-shadow:

0px

0px

20px

#000;

-webkit-border-radius:

10px;

-moz-border-radius:

10px;

-o-border-radius:

10px;

border-radius:

10px;

behavior:

url();/*兼容ie，加上这句*/}