box-shadow以由逗号分隔的列表来描述一个或多个阴影效果。这里记录一下box-shadow单边阴影的实现。
先看看box-shadow最长的语法长啥样:
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow单边阴影的实现
.top{
box-shadow: 0 -2px 0 red;
}
.right{
box-shadow: 2px 0 0 green;
}
.bottom{
box-shadow: 0 2px 0 blue;
}
.left{
box-shadow: -2px 0 0 orange;
}