html盒子阴影只设置左右,只在容器一边或两边显示盒子阴影

实现方案

首先定义一个有具体宽高的盒子，然后正确定位:after伪类。

效果

[图片上传中...(image.png-8e8e17-1593570486291-0)]

底部阴影

代码:

Document

.box-shadow {

background-color: #FF8020;

width: 160px;

height: 90px;

position: relative;

}

.box-shadow:after {

content: "";

width: 150px;

height: 1px;

display: block;

position: absolute;

bottom: 0px;

left: 5px;

z-index: -1;

-webkit-box-shadow: 0px 0px 8px 2px #000000;

-moz-box-shadow: 0px 0px 8px 2px #000000;

box-shadow: 0px 0px 8px 2px #000000;

}