box-shadow用法详解

1、box-shadow概述

用来实现对元素产生阴影效果

1.1、box-shadow常用属性

box-shadow: h-shading    v-shading    blur                  spread              color         inset;

box-shadow: X轴偏移量 Y轴偏移量   阴影模糊半径   阴影扩展半径   阴影颜色   投影方式; 

h-shading:   水平阴影 允许负值

v-shading:   垂直阴影  允许负值

blur:         模糊距离

spread:       阴影大小

color:        阴影颜色

inset:        内投影

1.2、创建一个基本案例，用于测试box-shadow

1.3、产生阴影

box-shadow: 0 0 0 30px black;

产生一个30px的阴影。这个只是产生阴影，但是比较的生硬

下图：红色是div,黑色是阴影

1.4、让阴影产生模糊效果

box-shadow: 0 0 30px 30px black;

增加了30px的模糊半径，阴影更像阴影了。

1.5、让阴影产生水平偏移

box-shadow: 30px 0 30px 30px black;

水平(v-shadow)增加了30px,水平右移动，负值向左偏移。

1.6、让阴影产生垂直偏移

box-shadow: 30px 30px 30px 30px black;

水平(h-shadow)增加了30px,垂直下移，负值向上偏移。

1.7、产生内投影

box-shadow: 30px 30px 30px 30px black inset;

可以根据自己的需求调整变化，达到自己的满意的效果。