顶部和底部相等的盒子阴影，右侧和左侧相等

Question

.container {
    background: red;
    width: 450px;
    height: 500px;
    margin: 20px 0 20px 20px;
    border: 25px solid;
    border-color: blue grey yellow green;
    box-shadow: 20px 20px 0 10px purple, 20px -20px 0 10px purple
}
.container-text {
    padding: 20px;
    color: white;
}

我尝试了outline属性，但是它在盒子的所有侧面都保持不变。因此，我正在使用box-shadow。我正在尝试重新创建this style。但是有了上面的代码，我得到了this。我似乎无法弄清楚如何在顶部和底部和右侧到左侧获得相等的实心阴影。这里需要一些帮助。

Answer 1

只需在spread属性中设置box-shadow值。

尝试一下box-shadow: 0 0 0 20px purple;