CSS border-radius剪辑颜色

Question

有没有办法在使用时设置剪裁空间的颜色：

border-top-left-radius: 1em;

我希望它是一种特定的颜色，但它正在采用它背后的div的颜色

Answer 1

如果您的元素没有使用z-index定位，您可以创建并绝对定位一个伪元素，该元素与角半径一样大（如果您愿意，也可以与元素本身一样大） ：

.your-div::before {
    position: absolute;
    width: 1em;  /* Or 100% if you prefer */
    height: 1em; /* Or 100% if you prefer */
    background-color: <your-color>;
    content: '';
    z-index: -1;
}

如果你的元素确实有自己的z-index，那么子元素或伪元素上的z-index: -1将无法工作，你必须创建一个新的元素和位置而是在圆角后面的元素。你如何做到这将取决于你的布局。