本文介绍一种巧妙利用 box-shadow: inset 实现“右侧半边边框”的 css 技术：让边框仅出现在容器非图像区域（如文字、按钮侧），而 svg 或图片所在区域自然遮挡边框，从而达成视觉上的“半边框”效果。
本文介绍一种巧妙利用 box-shadow: inset 实现“右侧半边边框”的 css 技术：让边框仅出现在容器非图像区域（如文字、按钮侧），而 svg 或图片所在区域自然遮挡边框，从而达成视觉上的“半边框”效果。
在实际 UI 开发中，常遇到类似设计需求：一个横排布局的模块（如 Logo + 操作按钮），要求整体容器带边框，但 Logo 区域（尤其是背景图或 SVG）需“无缝融入”，不显示边框；而右侧文本/按钮区域则需清晰边框——即所谓“半边框”（half border）。直接使用 border-right 会导致整条垂直边线贯穿左右，无法规避图像区域。
此时，box-shadow: inset 是更优雅的解决方案。它本质是向内投射的阴影，可模拟边框效果，且因绘制层级在内容之下、但受 overflow: hidden 和子元素遮盖影响，能天然实现“被图像裁剪”的视觉中断效果。
✅ 推荐实现方式（基于你的结构）
首先，移除原 .carilion-proud-logo-section 的 border-right，改用内阴影模拟右侧边框：
.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; /* 关键：限制内阴影溢出，配合图像遮挡 */
/* 替代 border-right 的 inset 阴影（右侧1px深灰线） */
box-shadow: inset -1px 0 0 0 #e0e0e0;
}
.left-section {
text-align: center;
width: 60%; /* 建议设具体比例，避免100%导致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 0 0 5px; /* 左侧圆角，与容器呼应 */
}
.right-section {
width: 40%;
text-align: center;
align-self: center;
padding: 39px 20px; /* 右侧留白，确保内容可读 */
border-radius: 0 5px 5px 0; /* 右侧圆角 */
}? 原理说明：box-shadow: inset -1px 0 0 0 #e0e0e0 表示在容器左侧内边缘绘制一条 1px 宽的垂直线。但因 .left-section 背景图完全覆盖左半区域（且 overflow: hidden 限制阴影外溢），该阴影仅在右侧区域可见——视觉上就成了“仅右侧有边框”。
⚠️ 注意事项
- 务必添加 overflow: hidden：这是控制阴影显示范围的关键，否则内阴影可能溢出到左侧。
- 避免对 .left-section 使用 border 或 outline：否则会干扰遮挡逻辑，破坏半边效果。
- 响应式适配：若 .left-section 宽度不固定（如 width: 100%），建议改为弹性比例（如 flex: 0 0 60%）或 min-width，防止在小屏下右侧区域被压缩消失。
- SVG 处理提示：你使用的是 <svg> 元素而非背景图？同样适用——只需确保 SVG 宽度足够覆盖左侧区域，并设置 display: block 和 margin: 0 auto 居中，即可自然遮挡左侧阴影。
✅ 最终效果验证
<div class="module-box carilion-proud-logo-section">
<div class="left-section">
<svg viewBox="0 0 100 40" width="120" height="40">
<rect width="100%" height="100%" fill="#2a5fc4"/>
<text x="50%" y="50%" fill="white" font-size="14" dominant-baseline="middle" text-anchor="middle">Carilion Proud</text>
</svg>
</div>
<div class="right-section">
<a href="#" style="display: inline-block; padding: 8px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">Visit the hub</a>
</div>
</div>此方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需伪元素、渐变 hack 或额外 DOM 节点，语义清晰、维护成本低，是实现“图像区无边框 + 内容区有边框”需求的专业级 CSS 解法。
