Css 在div的边界级别应用渐变效果

我试图给梯度效果的一个div在边界级别与两种颜色插入使用css。但我无法得到如示例所示的效果。梯度效果应该是从Square区域的顶部到中部。 我确实在图像中标记了渐变效果的区域

请检查此代码

.box{
保证金：50px自动；
宽度：250px；
高度：250px；
填充：20px；
边框顶部：10px实心#3e3ad5；
边框底部：10px实心#d53a3a；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
背景位置：0，100%0；
背景重复：无重复；
-webkit背景大小：10px 100%；
-moz背景尺寸：10px 100%；
背景尺寸：10px100%；
背景图像：-webkit线性渐变（顶部，#3e3ad5 0%，#d53a3a 100%），-webkit线性渐变（顶部，#3e3ad5 0%，#d53a3a 100%）；
背景图像：-莫兹线性梯度（顶部，#3acfd5 0%，#3a4ed5 100%），-莫兹线性梯度（顶部，#3acfd5 0%，#3a4ed5 100%）；
背景图像：-o-线性梯度（顶部，#3acfd5 0%，#3a4ed5 100%），-o-线性梯度（顶部，#3acfd5 0%，#3a4ed5 100%）；
背景图像：线性渐变（至底部，#3e3ad5 0%，#d53a3a 100%），线性渐变（至底部，#3e3ad5 0%，#d53a3a 100%）；
}

---

Border Gradient

您尝试了什么代码？尝试了此代码，但没有得到。请在问题中发布您的代码：寻求调试帮助的问题（“此代码为什么不工作？”）必须包括所需的行为，一个特定的问题或错误，以及在问题本身中重现它所需的最短代码。通过快速的谷歌搜索，我找到了几个答案。你尝过这些吗？这对div buddy很好，但当涉及到按钮时，它不适用。我确实希望将此应用于边界级别的按钮。