如何为 div 实现右侧半边框（仅右侧可见，图像区域无边框）-html教程-PHP中文网

如何为 div 实现右侧半边框（仅右侧可见，图像区域无边框）

本文介绍一种简洁可靠的 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 或背景图不受影响：

10Web

10Web是一款使用 AI 生成、编辑和托管网站的建站工具。

下载

移除原 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;
}

⚠️ 注意事项：