本文介绍一种简洁可靠的 CSS 方案，利用 box-shadow: inset 模拟「仅右侧显示的半边框」效果，避免图像被边框切割，同时保持布局结构不变。
本文介绍一种简洁可靠的 css 方案，利用 `box-shadow: inset` 模拟「仅右侧显示的半边框」效果，避免图像被边框切割，同时保持布局结构不变。
在实际开发中，当容器内包含背景图或 /
此时，box-shadow: inset 是更优雅的解决方案——它可精准控制「仅在右侧绘制一条内嵌边框线」，且天然不与图像层叠冲突：
.carilion-proud-logo-section {
margin: 0 30px 30px 30px;
display: flex;
justify-content: space-between;
border-radius: 5px;
overflow: hidden; /* 关键：裁切超出部分，确保阴影不溢出 */
/* 替代原 border-right，实现「仅右侧可见」的半边框 */
box-shadow: inset -1px 0 0 0 #e0e0e0; /* 左偏移 -1px → 仅右侧显示竖线 */
}✅ 原理说明：inset -1px 0 0 0 #e0e0e0 表示一个向左偏移 1px 的内阴影。由于容器设置了 overflow: hidden，左侧阴影被裁切，仅右侧 1px 宽度的阴影保留，视觉上即为一条右侧边框线。
同时，需确保 .left-section 中的 SVG 或背景图不受影响：
- 移除原 border-right 相关声明；
- 保持 .left-section 的 clip-path 和 background-size: cover 不变；
- 若 .left-section 内含
完整优化后的 CSS 片段如下：
.carilion-proud-logo-section {
margin: 0 30px 30px 30px;
display: flex;
justify-content: space-between;
border-radius: 5px;
overflow: hidden;
box-shadow: inset -1px 0 0 0 #e0e0e0; /* ✅ 右侧半边框核心 */
}
.carilion-proud-logo-section .left-section {
text-align: center;
width: 100%;
padding: 39px 0;
background: url("../../../../../../assets/images/carilion-proud-blue.png") no-repeat center;
background-size: cover;
clip-path: ellipse(100% 150% at 0% 50%);
}
.carilion-proud-logo-section .right-section {
width: 100%;
text-align: center;
align-self: center;
}⚠️ 注意事项：
- 切勿遗漏 overflow: hidden，否则 inset 阴影可能在左侧意外显现；
- 若需适配深色模式，建议将 #e0e0e0 替换为 CSS 自定义属性（如 var(--border-color)），便于统一维护；
- 此方案兼容所有现代浏览器（Chrome 25+、Firefox 13+、Safari 6.1+），无需前缀。
该方法轻量、语义清晰、无额外 DOM 节点，是实现「图像免边框 + 内容区半边框」的理想实践。
