html - 上下相等的 box-shadow 和左右相等的 box-shadow

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. 我正在尝试重新创建这种风格。但是通过上面的代码，我得到了这个。我似乎无法弄清楚如何在上下和左右获得相等的实心盒子阴影。在这里需要一些帮助。

标签： htmlcss

Answer 1

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

尝试这个box-shadow: 0 0 0 20px purple;