Html 我能'；t复制模型梯度

我正在尝试将html和css集成到web模型中

在这个css模型中，我有以下css代码：

.Rectangle {
 border-radius: 16px;
 border-style: solid;
 border-width: 4px;
 border-image-source: linear-gradient(228deg, #ffffff 64%, #ffd43c 3%, #ffd43c 3%);
 border-image-slice: 1;
}

当我将其复制到我的代码中并在浏览器上测试时，它不起作用，结果是：

---

结果中没有降级效果和边界半径。有什么解决方案吗？

边框图像

和

边框图像切片

与

边框半径

不兼容。如果需要添加边界半径，则必须使用位于

div

后面的伪元素，如

：：before

.rectangle{
字号：2rem；
字体系列：无衬线；
字体大小：粗体；
位置：相对位置；
填充：1em；
框大小：边框框；
背景：白色；
颜色：#000；
背景剪辑：填充框；
边框：实心4px透明；
边界半径：1米；
}
.矩形：：之前{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
z指数：-1；
保证金：-4px；
边界半径：继承；
背景：线性梯度（40度，#ffd43c 50px，透明140px）；
}

---

标签

非常感谢，但使用此解决方案会影响响应度，我使用引导系统网格，尝试将代码放在一列和一行中，调整大小后，边框变得非常小，宽度不固定请参见更新的答案。无论

div

有多宽，渐变边框的大小都应该保持不变。我仍然有同样的问题，请尝试在其他窗口上展开代码片段并将其调整为小设备，您将看到标签超出了框架，边框变形，最后变成正方形：（你在看我更新的答案吗？正如你所看到的，线性渐变中的颜色停止点在

50px

/

140px

处保持不变。无论视口如何，渐变边框都保持相同大小：