盒子阴影看效果

304 阅读1分钟

盒子用法

              x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色  |  阴影向内
box-shadow:  offset-x | offset-y | blur-radius | spread-radius | color |  inset;

image.png

/*四周外阴影*/
box-shadow: 0 0 3px 3px #ccc;
/*四周内阴影*/
box-shadow:inset 0px 0px 5px 1px #000; 

/*左*/
box-shadow: -7px 0 5px -5px #333;
/*右*/
box-shadow:  7px 0 5px -5px #333;
/*上*/
box-shadow: 0 -7px  5px -5px #333;
/*下*/
box-shadow:  0 7px 5px -5px #333;

/*右下*/
box-shadow: 3px 3px 1px 1px #666;
/*右上*/
box-shadow: 3px -3px 1px 1px #666;
/*左下*/
box-shadow: -3px 3px 1px 1px #666;
/*左上*/
box-shadow: -3px -3px 1px 1px #666;

转载大佬:axjy可看更全