CSS 如何只在左右两侧添加盒子阴影

在本文中，我们将介绍如何通过CSS只在左右两侧为元素添加盒子阴影效果，同时保持顶部和底部无阴影的状态。

阅读更多：CSS 教程

使用before和after伪元素

一种方法是使用CSS的伪元素before和after来模拟创建阴影效果。我们可以将这两个伪元素放置在元素的左右两侧，并通过设置他们的宽度和高度来调整阴影的宽度和高度。

<style>
    .shadow-box {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: #eaeaea;
    }

    .shadow-box::before,
    .shadow-box::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .shadow-box::before {
        left: 0;
    }

    .shadow-box::after {
        right: 0;
    }
</style>

<div class="shadow-box"></div>

在上面的示例中，我们首先创建了一个类名为shadow-box的div，然后使用伪元素before和after来添加盒子阴影。通过设置这两个伪元素的宽度为20px，我们可以控制阴影的宽度。通过调整类名为shadow-box的div的背景色，你可以自定义盒子的样式。

使用box-shadow属性

另一种更简单的方法是使用CSS的box-shadow属性来实现只在左右两侧添加盒子阴影的效果。box-shadow属性可以添加一个或多个阴影效果，并可以通过设置参数来控制阴影的位置、颜色和大小。

<style>
    .shadow-box {
        width: 200px;
        height: 100px;
        background-color: #eaeaea;
        box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.3),
                    10px 0 10px -10px rgba(0, 0, 0, 0.3);
    }
</style>

<div class="shadow-box"></div>

在上面的示例中，我们使用了box-shadow属性来为类名为shadow-box的div元素添加了两个阴影效果。每个阴影效果由四个参数组成，分别是阴影的水平偏移、垂直偏移、模糊半径和阴影的颜色。通过设置水平偏移为-10px和10px，我们可以控制阴影的位置。通过调整阴影的颜色和模糊半径，你可以自定义盒子阴影的样式。