在css3中,box-shadow可用来设置盒子元素的阴影效果。具体设置如下:

1
box-shadow:length length length color inset;

第一个length是指阴影在横方向上的偏移,正值向右,负值向左;

第二个length是指阴影在纵方向上的偏移,正值向下,负值向上;

第三个length是指阴影模糊半径;

color支持三种写法:十六位颜色值、rgb写法、rgba写法;

inset是指内阴影,可选值,当加上inset时,就为内阴影;不加上inset时,就为外阴影。

各浏览器的支持情况如下:





















































































阴影十六位颜色值rgb写法rgba写法内阴影多阴影
firefox 23.0.1支持支持支持支持支持支持
chrome 29.0.1547.57支持支持支持支持支持支持
opera 11.52支持支持支持支持支持支持
safari for window 5.1.1支持支持支持支持支持支持
ie10支持支持支持支持支持支持
ie9支持支持支持支持支持支持
ie8不支持不支持不支持不支持不支持不支持
ie7不支持不支持不支持不支持不支持不支持