如何用CSS或SVG实现带圆角线条的组合半圆图形？

问题分析 #

你的代码存在几个导致圆角不生效的问题：

• 路径被拆分为多个独立的M指令段，stroke-linejoin仅对连续路径的节点生效，独立线段之间无法应用圆角
• 半圆用三次贝塞尔曲线(C)绘制不够精准，且和前后直线段的衔接没有形成连续路径
• stroke属性重复定义（style内的stroke: rgb(0,0,0)与单独的stroke="#808600"冲突）

修正后的代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <!-- 连续路径：左直线 + 下半圆 + 右直线 -->
  <path 
    d="M36.8 31.6 L142.9 31.6 
       A50 50 0 0 1 242.9 31.6 
       L362.3 31.6"
    fill="#d8d8d8"
    stroke="#808600"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

关键改动说明 #

• 合并连续路径：将左直线、半圆、右直线整合为单条路径，确保节点连续，stroke-linejoin能在直线与半圆的衔接处生成圆角
• 用椭圆弧(A)绘制半圆：A50 50 0 0 1 242.9 31.6 表示绘制一个半径50的下半圆（参数0 0 1控制方向和弧度），比贝塞尔曲线更精准
• 统一样式属性：移除重复的stroke定义，将fill和stroke单独声明，避免样式冲突
• 圆角生效逻辑：stroke-linecap="round"处理左右两端的端点圆角，stroke-linejoin="round"处理直线与半圆的衔接圆角

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