css阴影box-shadow上下左右阴影

css阴影box-shadow

1. 语法

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

值	描述
h-shadow	必需。水平阴景拍的位置。允许负值。
v-shadow	必需。垂直阴景拍的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴景的尺寸。
color	可选。阴景的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。

2. 示例

2.1 右阴影

.box-right {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 20px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

2.2 左阴影

.box-left {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: -20px 0px 30px 0px rgba(0, 0, 0, 0.5);
}

2.3 上阴影

.box-top {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px -20px 30px 0px rgba(0, 0, 0, 0.5);
}

2.4 下阴影

.box-bottom {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.5);
}

2.5 中间阴影

.box-middle {
  width: 100px;
  height: 100px;
  background: orange;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
}