CSS3之box-shadow基础详解

前言

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

参数值	描述
h-shadow (X轴偏移量)	必需。水平阴影的位置。允许负值。
v-shadow (Y轴偏移量)	必需。垂直阴影的位置。允许负值。
blur (阴影模糊半径)	可选。模糊距离。
spread (阴影扩展半径)	可选。阴影的尺寸。
color (阴影颜色)	可选。阴影的颜色。请参阅 CSS 颜色值。
inset (投影方式)	可选。将外部阴影 (outset) 改为内部阴影。

文档来自=>W3Cschool

Step – 实例讲解

Step-1：

box-shadow: 0 0 5px #ccc;// x，y偏移量为0  5px的模糊半径

Step-2：

# 改变X轴偏移量
box-shadow: 5px 0 5px #ccc;// 水平偏移5px

Step-3：

# 改变Y轴偏移量
box-shadow: 0 5px 5px #ccc;// 垂直偏移5px

Step-4：

# 改变X、Y轴偏移量
box-shadow: