CSS3中的box-shadow(阴影)使用说明和兼容性问题【百科全说】

css3中的box-shadow(阴影)兼容性问题是我们经常遇到的前端布局难点，如何有合理的添加CSS阴影？如何让CSS阴影兼容所有主流浏览器？在这里开创者素材来个大家讲一下关于CSS阴影的使用和难点解决。

CSS3 box-shadow 属性讲解

01

box-shadow: h-shadow v-shadow blur spread color inset;h-shadow：阴影水平偏移的距离，大于0表示向右偏移，小于0表示向左偏移，等于0等于没有水平偏移。该参数为必需参数。v-shadow：阴影垂直偏移的距离，大于0表示向下偏移，小于0表示向上偏移，等于0表示没有垂直偏移。该参数为必需参数。blur：阴影的模糊距离，该参数为可选参数。spread：阴影的尺寸，该参数为可选参数。0px代表阴影和当前的实体一样大，大于0则表示大于实体的尺寸。color：阴影的颜色，该参数为可选参数。参数的形式有：black(英文)、#000000(16进制)、RGB:(0,0,0)(10进制)等。inset：将外部阴影 (outset) 改为内部阴影。该参数为可选参数。也有这样表述的：box-shadow:inset x-offset y-offset blur-radius spread-radius color 对象选择器 box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色
02

水平向右偏移5像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:5px 0px 0px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
03

水平向左偏移5像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:-5px 0px 0px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
04

垂直向下偏移5像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:0px 5px 0px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
05

垂直向上偏移5像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:0px -5px 0px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
06

向右下偏移5像素，阴影模糊半径设置为5像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:5px 5px 5px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
07

向右下偏移5像素，阴影模糊半径设置为5像素,设置阴影的尺寸为10像素 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:5px 5px 5px 10px #333; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
08

向右下偏移5像素，阴影模糊半径设置为5像素,设置阴影的尺寸为10像素，设置阴影的颜色为红色 .box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:5px 5px 5px 10px #F00; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }

设置内部阴影

01

.box_shadow{ width:300px; height:120px; background:#AAA; box-shadow:0px 0px 5px 5px #999 inset; text-align:center; font:900 55px/120px "微软雅黑", Helvetica, sans-serif; color:#FFF; }
02

浏览器兼容问题调用方法 .box_shadow{ background-color: #eee; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ }

CSS3中的box-shadow(阴影)使用说明和兼容性问题

CSS3 box-shadow 属性讲解

设置内部阴影

相关推荐