css - 如何使用CSS(或SVG)部分剪切边框？

我想剪辑div的边框，其中有一些border-radius来模仿计时器如何过期。
但是除了clip-path: polygon(...)之外，找不到其他方法
但是，构建自定义多边形似乎是控制边框长度的一种非常困难的方法。

是否有一些更简单/更优雅的方法来使用CSS（或SVG）呢？
这是状态少的理想结果的图像⇩⇩

最佳答案

纯svg

使用线stroke-dashoffset的属性可以实现绘制线的效果，该属性是从行的开头开始的缩进。

当stroke-dashoffset具有最大值时，该行隐藏；当stroke-dashoffset = "0"时，该行完全可见

因此，将stroke-dashoffset的值从max更改为零，可以得到画线的效果。

<svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" >

    <rect x="50" y="100" width="200" height="100" rx="50" fill="#E0E9F6" stroke-width="4"  stroke="grey" stroke-dashoffset="600" stroke-dasharray="600">
	<animate attributeName="stroke-dashoffset" begin="1s" from="600" to="0" dur="7s" repeatCount="indefinite" />
	</rect>

</svg>