box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影的位置,可以为负值。 v-shadow:垂直阴影的位置,可以为负值。 blur:模糊的距离。 spread:阴影的尺寸,在此基础上还要加上原来的大小。 color:阴影的颜色。 inset:可选参数,用于将外部阴影转换为内部阴影。
使用CSS3阴影的时候,大家可以根据需要自行设置各个值,实现不同的效果。比如,如果大家只需要一个简单的阴影效果,可以这样写:
box-shadow: 0 0 10px #666;
上面的代码中,h-shadow和v-shadow都是0,表示阴影在元素中心,blur是10px,表示阴影模糊半径为10px,color是#666,表示阴影颜色为灰色。
如果大家要添加多个阴影效果,可以用逗号隔开:
box-shadow: 0 0 10px #666, 0 0 20px #999;
上面的代码中,大家设置了两个阴影效果,第一个阴影的blur是10px,第二个阴影的blur是20px,这样可以实现两个不同半径的阴影效果。
如果大家不需要外部阴影,而是需要内部阴影,可以添加inset:
box-shadow: inset 0 0 10px #666;
上面的代码中,大家将最后一个参数设置为inset,表示生成内部阴影效果。
以上就是CSS3阴影的值代表什么,根据需要灵活运用,可以打造出更加炫酷的效果。