代码改变世界

box-shadow

2016-05-30 15:15  改吧  阅读(200)  评论(0编辑  收藏  举报

box-shadow:h v blur spread color inset;

h-----是代表水平方向的阴影,正值就在x轴的右边,负值就在x轴的左边

v-----是代表垂直方向的阴影,正值就在y轴的下方,负值就在y轴的上方

blur----模糊的程度,数值越大越模糊

spread----模糊的尺寸,数值为正值时,整个阴影都扩展扩大,为负值就会缩小

inset---可以改成outset外部阴影

box-shadow可以制作单边阴影:.demo{

              box-shadow: -5px 0 5px -5px green, /*左边阴影*/
			0 -5px 5px -5px blue, /*顶部阴影*/
			0 5px 5px -5px red, /*底部阴影*/
			5px 0 5px -5px yellow; /*右边阴影*/


}