如何用CSS（或SVG）实现带圆角div的部分边框裁剪（模拟倒计时）

我刚好折腾过类似的需求！完全懂你手写clip-path: polygon(...)有多抓狂——尤其是还要适配border-radius的时候，手动算坐标简直是反人类操作😅。这里给你分享两个更简洁优雅的方案，不管是纯CSS还是SVG都能完美解决：

方案1：CSS Mask 渐变遮罩（纯CSS，无需额外元素） #

利用CSS的mask属性结合渐变，能轻松实现带圆角的部分边框裁剪，完全不用算坐标！核心思路是用渐变遮掉不需要显示的边框区域，剩下的就是你要的效果。

示例代码：

.countdown-card {
  width: 200px;
  height: 200px;
  border: 4px solid #2563eb; /* 基础边框样式 */
  border-radius: 12px; /* 圆角和边框完美适配 */
  /* 核心遮罩逻辑：显示70%的边框 */
  mask: 
    /* 第一个渐变：只保留左侧70%的不透明区域 */
    linear-gradient(to right, black 70%, transparent 70%) 0 0 / 100% 100% no-repeat,
    /* 第二个渐变：全不透明，作为基础遮罩 */
    linear-gradient(black, black);
  /* 复合遮罩：把第一个渐变的透明区域从第二个里排除 */
  mask-composite: exclude;
}

• 原理：mask-composite: exclude会让两个遮罩叠加后，只保留第一个遮罩不透明且第二个遮罩不透明的区域，以及第一个透明且第二个透明的区域——简单说就是把第一个渐变的透明部分（右侧30%）从完整边框里“挖掉”。
• 优势：纯CSS实现，不用额外DOM元素，border-radius自动适配，修改比例只需要改渐变的百分比就行。
• 兼容性：现代浏览器（Chrome、Firefox、Edge）都支持，Safari需要加-webkit-mask前缀，mask-composite对应-webkit-mask-composite: source-out。

方案2：SVG 描边控制（精准度拉满，动态友好） #

如果需要更精准的控制或者更好的兼容性，SVG是绝佳选择。利用SVG的stroke-dasharray和stroke-dashoffset属性，可以精确控制边框的显示长度，天然支持圆角。

示例代码：

<!--  viewBox和宽高保持一致，方便计算 -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 绘制带圆角的矩形，注意留出发描边的空间（stroke-width=4，所以x/y=2，宽高=200-4=196） -->
  <rect 
    x="2" y="2" width="196" height="196" 
    rx="12" ry="12" <!-- 对应CSS的border-radius -->
    fill="none" 
    stroke="#2563eb" 
    stroke-width="4"
    <!-- 总周长：2*(196+196) - 8*12 + 2*π*12 ≈ 784 - 96 + 75.4 = 763.4（可以用JS动态计算） -->
    stroke-dasharray="763.4" 
    <!-- 显示70%的话，offset=总周长*(1-0.7)=763.4*0.3≈229 -->
    stroke-dashoffset="229"
  />
</svg>

• 原理：stroke-dasharray设置为边框的总周长，stroke-dashoffset设置为需要隐藏部分的长度，这样就能让边框只显示剩下的部分。
• 优势：兼容性极佳（甚至支持IE11），动态修改时只需要用JS计算周长和offset就行，适合倒计时动画场景。
• 小技巧：如果要做动态倒计时，可以用JS获取SVG元素的getTotalLength()方法自动计算周长，不用手动算！

对比clip-path的优势 #

这两个方案都完全避开了手动计算polygon坐标的麻烦，尤其是带border-radius的场景，不需要考虑圆角的曲线坐标，直接适配原有圆角，代码简洁易维护。

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