1.顶部阴影
box-shadow: 0px -5px 10px -5px red;
2.右部阴影
box-shadow: 5px 0 10px -5px red;
3.底部阴影
box-shadow: 0 5px 10px -5px red;
4.左边阴影
box-shadow: -5px 0 10px -5px red;
5.左上阴影
box-shadow: -5px -5px 10px -4px red;
6.右上阴影
box-shadow: 5px -5px 10px -4px red;
7.右下阴影
box-shadow: 5px 5px 10px -4px red;
8.左下阴影
box-shadow: -5px 5px 10px -4px red;
9.无上阴影
/* .left-bottom, .right-bottom 组合 */
box-shadow: -5px 5px 10px -4px red, 5px 5px 10px -4px red;
10.无右阴影
/* .left-top, .left-bottom 组合 */
box-shadow: -5px -5px 10px -4px red, -5px 5px 10px -4px red;
11.无下阴影
/* .left-top, .right-top 组合 */
box-shadow: -5px -5px 10px -4px red, 5px -5px 10px -4px red;
12.无左阴影
/* .right-bottom, .right-top 组合 */
box-shadow: 5px 5px 10px -4px red, 5px -5px 10px -4px red;
总结：
html：
<template>
<div class="aa">
<div class="shadow">
<div class="top">顶部阴影</div>
<div class="right">右部阴影</div>
<div class="bottom">底部阴影</div>
<div class="left">左边阴影</div>
<div class="left-top">左上阴影</div>
<div class="right-top">右上阴影</div>
<div class="right-bottom">右下阴影</div>
<div class="left-bottom">左下阴影</div>
<div class="no-top">无上阴影</div>
<div class="no-right">无右阴影</div>
<div class="no-bottom">无下阴影</div>
<div class="no-left">无左阴影</div>
</div>
</div>
</template>
css:
.shadow div {
float: left;
margin: 50px 120px;
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
text-align: center;
line-height: 100px;
}
.top {
box-shadow: 0px -5px 10px -5px red;
}
.right {
box-shadow: 5px 0 10px -5px red;
}
.bottom {
box-shadow: 0 5px 10px -5px red;
}
.left {
box-shadow: -5px 0 10px -5px red;
}
.left-top {
box-shadow: -5px -5px 10px -4px red;
}
.right-top {
box-shadow: 5px -5px 10px -4px red;
}
.right-bottom {
box-shadow: 5px 5px 10px -4px red;
}
.left-bottom {
box-shadow: -5px 5px 10px -4px red;
}
.no-top {
/* .left-bottom, .right-bottom 组合 */
box-shadow: -5px 5px 10px -4px red, 5px 5px 10px -4px red;
}
.no-right {
/* .left-top, .left-bottom 组合 */
box-shadow: -5px -5px 10px -4px red, -5px 5px 10px -4px red;
}
.no-bottom {
/* .left-top, .right-top 组合 */
box-shadow: -5px -5px 10px -4px red, 5px -5px 10px -4px red;
}
.no-left {
/* .right-bottom, .right-top 组合 */
box-shadow: 5px 5px 10px -4px red, 5px -5px 10px -4px red;
}
四周阴影：
box-shadow: 2px 2px 10px #e1e0e0;
效果：
