Html 如何在直线上仅创建左右两侧的阴影？

我有一条线的宽度：15px；高度为2px
我的问题是，如何仅在右侧和左侧创建阴影？

尝试以下方法（基于）：

您可以使用CSS框阴影对其进行调整 添加以下类以应用阴影

阴影的水平偏移量，正值表示阴影将 在长方体的右侧，负偏移将使阴影出现 盒子的左边

阴影的垂直偏移，负的表示阴影的垂直偏移 长方体阴影将位于长方体上方，正阴影表示阴影 将在盒子下面

模糊半径（可选），如果设置为0，阴影将锐利， 数字越大，越模糊

扩展半径（可选），正值会增大 阴影、负值会减小大小。默认值为0（默认值为0） 阴影的大小与模糊相同）

颜色十六进制颜色值

---

此提琴具有仅在以下位置显示阴影的示例：

• 上下
• 左右
• 顶

有了它，你应该可以做任何类型的阴影

守则：

div {
  margin-top: 20px;
  margin-left: 20px;    
  width: 100px;
  height: 100px;
}

.horizontal {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.vertical {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.one-side {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}

希望这有帮助

        .box {
            height: 150px;
            width: 300px;
            margin: 20px;
            border: 1px solid #ccc;
        }

        .top {
            box-shadow: 0 -5px 5px -5px #333;
        }

        .right {
            box-shadow: -5px 0 5px -5px #333;
        }

        .bottom {
            box-shadow: 0 5px 5px -5px #333;
        }

        .left {
            box-shadow: 5px 0 5px -5px #333;
        }

        .all {
            box-shadow: 0 0 5px #333;
        }

在身体里放

    <div class="box top"></div>
    <div class="box right"></div>
    <div class="box bottom"></div>
    <div class="box left"></div>
    <div class="box all"></div>

我总是用图像来做这件事；我很想看看是否可以使用CSS。必填字段验证消息：没有问题：）很高兴我能提供帮助此链接显示div右侧和底部的阴影。我只需要右侧和左侧阴影。您好，框阴影支持-ve值。因此，您可以调整使其向左的值。但是你不能直接把阴影放在左边和右边。相反，试着制作两个盒子并应用阴影。

        .box {
            height: 150px;
            width: 300px;
            margin: 20px;
            border: 1px solid #ccc;
        }

        .top {
            box-shadow: 0 -5px 5px -5px #333;
        }

        .right {
            box-shadow: -5px 0 5px -5px #333;
        }

        .bottom {
            box-shadow: 0 5px 5px -5px #333;
        }

        .left {
            box-shadow: 5px 0 5px -5px #333;
        }

        .all {
            box-shadow: 0 0 5px #333;
        }

    <div class="box top"></div>
    <div class="box right"></div>
    <div class="box bottom"></div>
    <div class="box left"></div>
    <div class="box all"></div>