如何编写通用且可逆的边框半径CSS？

Question

我正在创建一个“并排”组件。我正在设计它，文本和图像应该是可交换的。 目前内边框半径硬编码如下：

.side-by-side:has(img) {
    img {
        border: none;
        border-radius: 0 var(--radius-3) var(--radius-3) 0;
    }
}

如何更新它以使其更加通用和可逆？

Answer 1

感谢ChatGPT！

.side-by-side > img:first-child {
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.side-by-side > img:last-child {
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

这解决了它。