css阴影box-shadow上下左右阴影
css阴影box-shadow
文章目录
css阴影box-shadow1. 语法2. 示例2.1 右阴影2.2 左阴影2.3 上阴影2.4 下阴影2.5 中间阴影
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);
}