如何为可互换的Side by Side组件编写通用可逆的CSS圆角代码？

你的现有代码硬编码了图片在右侧时的圆角规则，无法适配图片在左侧的场景。以下是几种通用化的修改方案，满足文本与图片位置互换时的圆角需求：

方案1：通过子元素位置自动判断（使用:has选择器） #

利用:has选择器检测图片在容器中的位置，自动应用对应的圆角样式，无需额外添加类：

/* 基础样式：移除图片边框 */
.side-by-side img {
    border: none;
}

/* 图片在容器最后（右侧）时的圆角 */
.side-by-side:has(img:last-child) img {
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

/* 图片在容器最前（左侧）时的圆角 */
.side-by-side:has(img:first-child) img {
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

使用方式：只需调整HTML中图片与文本的顺序即可自动切换圆角：

<!-- 图片在右侧 -->
<div class="side-by-side">
  <div class="text-section">...</div>
  <img src="your-image.jpg" alt="描述">
</div>

<!-- 图片在左侧 -->
<div class="side-by-side">
  <img src="your-image.jpg" alt="描述">
  <div class="text-section">...</div>
</div>

方案2：通过自定义类控制（兼容性更好） #

如果需要兼容不支持:has选择器的旧浏览器，可以通过给容器添加类来明确指定图片位置：

/* 基础样式 */
.side-by-side img {
    border: none;
}

/* 图片在右侧 */
.side-by-side.img-right img {
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

/* 图片在左侧 */
.side-by-side.img-left img {
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

使用方式：给容器添加对应类：

<!-- 图片在右侧 -->
<div class="side-by-side img-right">
  <div class="text-section">...</div>
  <img src="your-image.jpg" alt="描述">
</div>

<!-- 图片在左侧 -->
<div class="side-by-side img-left">
  <img src="your-image.jpg" alt="描述">
  <div class="text-section">...</div>
</div>

方案3：通过CSS变量动态配置（更灵活） #

使用CSS变量统一管理圆角值，可随时切换或扩展其他圆角规则：

.side-by-side {
    /* 默认图片在右侧的圆角 */
    --img-border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

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

/* 图片在左侧时覆盖变量 */
.side-by-side.img-left {
    --img-border-radius: var(--radius-3) 0 0 var(--radius-3);
}

说明：这种方式便于后续扩展其他圆角样式（比如上下布局的圆角），只需修改变量值即可。

配图：

内容的提问来源于stack exchange，提问作者Tithos