實現方案

首先定義一個有具體寬高的盒子，然后正確定位: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;

}

總結

以上是生活随笔為你收集整理的html盒子阴影只设置左右,只在容器一边或两边显示盒子阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。