CSS3阴影

属性介绍

语法

box-shadow: x-shadow y-shadow blur spread color inset;

x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现

box-shadow: x-shadow 0 10px 10px rgba(0, 0, 0, .2);

 

y-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，y-shadow不同情况下的不同表现

box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);

 

blur: 可选的，模糊距离，不支持负数，下图表示了在其他参数相同，blur不同情况下的不同表现

box-shadow: 0 0 blur 10px rgba(0, 0, 0, .2);

spread: 可选的，阴影的扩展半径，阴影的原理其实就是复制一个当前元素出来，这个属性就是控制的复制出来的元素的半径，一定要记好了啊，支持负数，如果为负数，复制出来的元素就会比原元素小，下图表示了在其他参数相同，spread不同情况下的不同表现

box-shadow: 0 0 10px spread rgba(0, 0, 0, .2);

 

 

color：可选的，颜色值，支持#000000格式或者rgb(0,0,0)格式或者rgba(0,0,0,.2)格式，下面展示了阴影对几种颜色格式的支持

box-shadow: 0 0 10px 10px color;

 

 

inset：可选的，内阴影，下面是使用了此参数的效果展示

box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5) inset;

 

多重阴影

css3的阴影支持多重阴影，只要将每个阴影属性用逗号隔开即可，用法如下

.box15 {
  border-radius: 50%;
  box-shadow: 
    -20px 0 20px 5px rgba(213, 255, 145, 0.5),
    0px -20px 20px 5px rgba(145, 255, 191, 0.5),
    20px 0 20px 5px rgba(82, 255, 220, 0.5),
    0 20px 20px 5px rgba(239, 255, 91, 0.5);
}