【CSS】盒子模型阴影 ( box-shadow 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影； )_盒子阴影

2、水平阴影示例

水平阴影代码 : 只修改第一个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 20px 2px 2px 2px black;

展示效果 :

水平阴影代码2 : 只修改第一个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: -20px 2px 2px 2px black;

展示效果 :

3、垂直阴影示例

垂直阴影代码 : 只修改第二个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 20px 2px 2px black;

展示效果 :

垂直阴影代码2 : 只修改第二个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px -20px 2px 2px black;

展示效果 :

5、模糊距离示例

模糊距离代码 : 只修改第三个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px 20px 2px black;

展示效果 :

模糊距离代码2 : 只修改第三个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px -20px 2px black;

展示效果 : 该值只能大于等于 0 ;

6、阴影尺寸示例

阴影尺寸示例代码 : 只修改第四个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px 2px 20px black;

展示效果 :

7、阴影颜色示例

阴影颜色示例代码 : 只修改第五个属性值 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px 2px 2px blue;

展示效果 :

8、内外阴影示例

内外阴影示例代码 : 只修改第六个属性值 ; 如果设置外阴影 , 不需要写第六个值 , 就是默认状态 , 写了就错了 ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px 2px 2px black;

展示效果 :

内外阴影示例代码 : 只修改第六个属性值 ; 如果设置内阴影 , 第六个属性值设置 inset ;

			/\* box-shadow: 水平阴影 垂直阴影 
 模糊距离 阴影尺寸 阴影颜色 内外阴影；\*/
			box-shadow: 2px 2px 2px 2px black inset;

展示效果 : 该写法几乎不用 ;