为什么添加一个边框半径会塌陷这个div的宽度

Question

这就是CSS规则的样子：

.button {
    display: block;
    padding: 2% 0 2% 0;
    background-color: green;
    position: absolute;
    margin-top: 30%;
    margin-left: 14.5%;
    margin-right: 14.5%;
    width: 75%
}

添加border-radius: 5px;时，它会折叠，并且不会应用边界半径。是否与position: absolute或display: block发生冲突？提前谢谢。

之前之后

Answer 1

是否将其添加到width: 75%声明之后？

    width: 75%
    border-radius: 5px;
}

如果是这样，您可能忘记在width: 75%后面添加分号。如果width不存在，它会按预期工作，因为它是最后一个声明，但在尝试将border-radius声明添加到它下面后，缺少的分号会产生语法错误，导致两个属性都中断。

这导致元素塌陷的原因是，如果没有应用宽度，position: absolute会导致元素收缩以适应其内容，而通常情况下，它会在容器允许的范围内拉伸。