本文介绍一种简洁可靠的 CSS 方案，利用 box-shadow: inset 模拟「仅右侧显示边框」的视觉效果，同时确保内部图像不被边框覆盖，兼顾语义结构与视觉一致性。
本文介绍一种简洁可靠的 css 方案，利用 `box-shadow: inset` 模拟「仅右侧显示边框」的视觉效果，同时确保内部图像不被边框覆盖，兼顾语义结构与视觉一致性。
在实际布局中，我们常遇到这样的需求：一个容器（如 .carilion-proud-logo-section）需要呈现「三边边框（上、右、下）」，但其内部左侧的 SVG/图片区域不能显示边框——尤其是右侧边框需「从中间断开」，形成「仅右侧半段可见」的视觉效果（参考原图：https://www.php.cn/link/a73e4449f58424e309862baa32667f88 border-right 会导致整条边框贯穿整个容器高度，无法避开图像区域。
此时，最轻量、兼容性好且无需额外 DOM 的解决方案是：用内阴影（box-shadow: inset）模拟边框，并配合 overflow: hidden 与合理布局实现「视觉上的半边效果」。
✅ 推荐实现方案（纯 CSS，无 JS，无伪元素）
.carilion-proud-logo-section {
margin: 0 30px 30px 30px;
display: flex;
justify-content: space-between;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-radius: 5px;
overflow: hidden; /* 关键：裁切超出部分，使阴影不溢出 */
/* 用 inset box-shadow 模拟右侧边框（仅右侧可见） */
box-shadow: inset -1px 0 0 0 #e0e0e0; /* 向左偏移 1px，只在右侧显示细线 */
}
.left-section {
text-align: center;
width: 60%; /* 建议设具体宽度，避免 flex 均分导致右侧过窄 */
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%);
border-radius: 5px;
/* 确保自身不继承父级阴影干扰 */
position: relative;
z-index: 1;
}
.right-section {
width: 40%;
text-align: center;
align-self: center;
padding: 0 20px;
/* 右侧内容需有足够内边距，避免文字紧贴“虚拟边框” */
}? 原理说明：box-shadow: inset -1px 0 0 0 #e0e0e0 表示一个向左偏移 1px 的内阴影。由于容器设置了 overflow: hidden，该阴影在左侧被裁切，仅在右侧边缘留下一条 1px 宽的垂直线，视觉上等效于「仅右侧边框」，且完全绕过 .left-section 中的图像区域。
⚠️ 注意事项与优化建议
- 不要滥用 !important：原 CSS 中 margin: 0 30px 30px 30px !important 会阻碍后续样式覆盖，建议移除，改用更精确的选择器优先级控制；
- 避免 width: 100% 在 flex 子项中滥用：.left-section 和 .right-section 若均设 width: 100%，会导致 flex 容器宽度失控；推荐按比例分配（如 60% / 40%）或使用 flex: 1 + min-width；
- 图像区域需独立「隔离」边框影响：.left-section 添加 position: relative; z-index: 1 可确保其内容层高于父级阴影层，防止边框视觉干扰；
-
响应式适配：若需移动端适配，可对 box-shadow 的偏移值做媒体查询调整，例如：
@media (max-width: 768px) { .carilion-proud-logo-section { box-shadow: inset -0.5px 0 0 0 #e0e0e0; } }
✅ 替代方案对比（简要）
| 方案 | 优点 | 缺点 |
|---|---|---|
| border-right + clip-path 裁剪右侧 | 语义清晰 | 需精确计算裁剪路径，兼容性略低（尤其旧 Safari） |
| 伪元素 ::after 绝对定位 | 精确控制位置 | 增加 DOM 复杂度，需手动计算尺寸 |
| inset box-shadow（本文推荐） | 零额外标签、高兼容性（IE11+）、易维护 | 需理解 inset 偏移逻辑 |
综上，inset box-shadow 是平衡实现成本、可维护性与视觉准确性的最优解。只需一行核心声明，即可优雅解决「图像避让、右侧半边边框」这一典型设计需求。
