我正在用Figma设计一个网站，它允许我创建一个均匀分布的边框，也就是对称的角落都是一样的，虚线现在相对于彼此是倾斜的或移位的.我想在我的网站上复制类似的行为，但我找不到一个可以与自适应UI一起工作的解决方案->；我想要放置边框的div的宽度和高度是不固定的.
我曾try 使用SVG和虚线边框生成器站点，但都没有达到预期的行为.我本以为这是一项常见的任务，有一个开发得很好的解决方案，但我无法谷歌任何东西，也无法使用人工智能进行任何工作输出.我试着从Figma中导出它，但没有一个插件工作得很好，即使是静态大小的插件.
你可以try 一些背景和梯度.调整下面的大小以查看结果:
.box {
--c: red;
--t: 5px; /* border thickness */
width: 300px;
height: 200px;
border: var(--t) solid #0000;
--b1:/calc(4*var(--t)) var(--t) linear-gradient(90deg,var(--c) 25%,#0000 0 75%,var(--c) 0) border-box round no-repeat;
--b2:/var(--t) calc(4*var(--t)) linear-gradient( var(--c) 25%,#0000 0 75%,var(--c) 0) border-box no-repeat round;
background:
0 0 var(--b1),0 100% var(--b1),
0 0 var(--b2),100% 0 var(--b2);
/* to debug */
overflow: hidden;
resize: both;
}<div class="box"></div>