html2canvas中border-left干扰border-top-right-radius的问题排查

你用CSS的border-radius制作了类“D”的图形，浏览器里显示完全正常，但通过html2canvas渲染后，右上角边框的末端却出现了变细的问题，对吧？先回顾下你的实现代码：

.a2 { 
  width: 1em; 
  height: 1em; 
  border-top-right-radius: 1em; 
  border-bottom-right-radius: 1em; 
  border: 4px solid black; 
  border-left: 0px; 
}

问题根源 #

从你后续做的动画测试能明显看出来，这个异常确实是border-left: 0干扰了border-top-right-radius的渲染逻辑。这里的核心差异在于原生浏览器和html2canvas的边框圆角计算逻辑：

• 原生浏览器：会智能处理边框缺失的情况，自动把圆角的起始/结束点顺滑衔接在相邻边框的边缘，视觉上不会有断裂或变细；
• html2canvas：在解析带圆角的非完整四边边框时，算法逻辑没有原生浏览器完善，它可能默认按照“四边都有边框”的情况计算圆角路径，当某一边边框宽度为0时，圆角部分的线条无法完整绘制，最终出现末端变细的视觉bug。

可行的解决方法 #

既然问题出在border-left: 0的处理上，我们可以换一种实现思路，避开这个渲染漏洞：

方法1：用伪元素覆盖左边框

保留完整的四边边框，再用伪元素把左边框覆盖掉，这样html2canvas能正确识别完整的圆角边框，同时视觉上达到隐藏左边框的效果：

.a2 {
  width: 1em;
  height: 1em;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  border: 4px solid black;
  position: relative;
  background: white; /* 和父容器背景色保持一致 */
}
.a2:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px; /* 宽度和边框宽度一致 */
  background: inherit; /* 继承父元素背景色 */
}

方法2：用clip-path裁剪实现

先创建一个带右边圆角的完整边框正方形，再通过clip-path裁剪掉左半部分，这种方式的渲染逻辑更简单，html2canvas的支持也更稳定：

.a2 {
  width: 1em;
  height: 1em;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  border: 4px solid black;
  clip-path: inset(0 0 0 50%); /* 裁剪掉左半区域 */
}

你可以试试这两种方案，应该能解决html2canvas渲染时的边框变细问题。

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