CSS 制作一个只在左右两侧具有阴影的

div>

在本文中，我们将介绍如何使用CSS来制作一个只在左右两侧具有阴影的

div>。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用box-shadow属性制作阴影

CSS中的box-shadow属性可以用于给元素添加阴影效果。该属性有一些可配置的值，包括阴影的颜色、模糊半径、水平和垂直偏移量等。对于我们要实现的这个效果，我们使用box-shadow来制作左右两侧的阴影。

以下是一个示例代码，展示了如何使用box-shadow属性来实现左右两侧的阴影效果：

.shadow-div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 10px 0 10px -7px rgba(0, 0, 0, 0.75), -10px 0 10px -7px rgba(0, 0, 0, 0.75);
}

在这个示例中，我们创建了一个名为.shadow-div的类，并给它设置了一个宽度为200像素，高度为100像素的区域。背景颜色使用了#f1f1f1，你可以根据需要进行更改。

box-shadow属性中的第一个值
“`10px 0 10px -7px rgba(0, 0, 0, 0.75)“` 代表了右侧的阴影效果。具体解释如下：
– “`10px“`：表示阴影的水平偏移量，也就是距离元素的右侧有多远。
– “`0“`：表示阴影的垂直偏移量，也就是距离元素的顶部或底部有多远。
– “`10px“`：表示阴影的模糊半径，也就是阴影的软化程度。
– “`-7px“`：表示阴影的扩散半径，也就是阴影的大小，负值会使阴影向内部扩展，从而只在左侧和右侧显示。
– “`rgba(0, 0, 0, 0.75)“`：表示阴影的颜色和透明度，这里使用的是黑色（RGB值为0, 0, 0）和透明度为0.75的颜色。

box-shadow属性中的第二个值
“`-10px 0 10px -7px rgba(0, 0, 0, 0.75)“` 则代表了左侧的阴影效果。其值与右侧的阴影配置基本相同，唯一的区别是水平偏移量的符号变为了负号。

通过使用这两个阴影效果，我们就可以实现只在左右两侧具有阴影的

了。

完整示例

下面是一个完整的示例，展示了如何将阴影效果应用到一个

元素上：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<style>
.shadow-div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 10px 0 10px -7px rgba(0, 0, 0, 0.75), -10px 0 10px -7px rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>

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

</body>
</html>

在这个示例中，我们将.box-shadow类应用到了一个

div>元素上，并设置了与前面示例中相同的样式。你可以在浏览器中运行这段代码，查看左右两侧具有阴影效果的

div>元素。