如何使盒子阴影在盒子的各个侧面起作用

Question

我正在使用盒子阴影在我用电子编写的程序前端中创建垂直发光线。该线出现在两个大背景之间，并用作分隔线。当前，阴影仅出现在左侧。我在做什么错，如何使它在双方都存在？当前看起来像this.

这是左右部分以及分隔线的样式代码。

        .left {
          background-color: #00000d;
          width: 150px; 
          height: 500px; 
          float: left; 
          text-align: center;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }
        .divider {
          background-color:yellow; 
          width: 5px; 
          height: 500px;
          float: left;
          box-shadow: 0 0 10px gold
        }
        .right {
          background-color: #00000d;
          width: 850px;
          height: 500px;
          float: left;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }

感谢任何人都能提供的帮助！

Answer 1

那是因为您的.right元素与右侧的框阴影重叠。尝试将其添加到.divider中作为解决方法：

position: relative;
z-index: 1;