box-shadow如何控制div的水平方向上两边有阴影

代码如下

<style>
    .myDiv {
        width: 200px; /* div的宽度 */
        height: 100px; /* div的高度 */
        background-color: #f5f5f5; /* div的背景色 */
        box-shadow: -4px 0 8px rgba(0, 0, 0, 0.6), 4px 0 8px rgba(0, 0, 0, 0.6); /* 分别设置左右两侧的阴影样式 */
    }
</style>
 
<div class="myDiv"></div>

通过设置box-shadow属性，我们为左右两侧分别添加了黑色（rgba(0, 0, 0, 0.6)）的阴影效果，并通过调整offsetX参数(-4px和4px)来改变阴影的位置【正数阴影在右边，负数阴影在左边】