如何为指定组件设计左侧边框？SVG或CSS伪类方案可行吗？

根据你提供的组件样式，下面给出两种可行的实现方案，以及各自的优缺点：

方案一：CSS伪类 + border-radius 实现 #

这种方案适合简单的圆角边框+中间缺口样式，纯CSS编写，无需额外资源。

代码示例 #

<div class="feature-card">
  <h3>标题内容</h3>
  <p>这里是组件的文本内容，可根据需求调整排版。</p>
</div>

.feature-card {
  position: relative;
  padding: 1.5rem;
  margin-left: 1rem;
  background: #fff;
  border: 2px solid #4CAF50;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

/* 左侧上圆角边框 */
.feature-card::before {
  content: '';
  position: absolute;
  left: -10px;
  top: -2px;
  width: 16px;
  height: calc(100% - 14px);
  border: 2px solid #4CAF50;
  border-right: none;
  border-top-left-radius: 8px;
  background: #fff;
}

/* 左侧下圆角边框 */
.feature-card::after {
  content: '';
  position: absolute;
  left: -10px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border: 2px solid #4CAF50;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
  background: #fff;
}

优缺点 #

• 优点：纯CSS实现，无需额外文件，尺寸、颜色可通过CSS变量快速调整，响应式适配简单
• 缺点：仅适合规则几何形状，过于复杂的边框样式难以实现

方案二：SVG 实现 #

如果需要更复杂的边框形状（比如特殊曲线、多段缺口），SVG方案会更灵活，能精确控制每一段线条的形状。

代码示例 #

<div class="feature-card">
  <h3>标题内容</h3>
  <p>这里是组件的文本内容，可根据需求调整排版。</p>
</div>

.feature-card {
  padding: 1.5rem;
  margin-left: 1rem;
  background: #fff;
  border: 2px solid #4CAF50;
  border-left: none;
  border-radius: 0 8px 8px 0;
  /* 嵌入inline SVG作为左侧背景 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="100%" viewBox="0 0 16 100"><path d="M8,0 C12,0 16,4 16,8 L0,8 L0,92 L16,92 C16,96 12,100 8,100" fill="none" stroke="%234CAF50" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px 100%;
  background-position: left center;
}

优缺点 #

• 优点：支持任意复杂的边框形状，代码直观，可直接在SVG中调整曲线、缺口细节
• 缺点：需要具备基础的SVG语法知识，修改样式时可能需要调整SVG代码

方案选择建议 #

• 如果只是实现图中这种上下圆角+中间缺口的简单边框，优先选CSS伪类方案，维护和调整更方便
• 如果边框有特殊的曲线、不规则缺口等复杂设计，选SVG方案能更好地还原设计效果

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