Javascript 水平边界梯度

这似乎微不足道，但我似乎在任何地方都找不到答案。我试图在悬停时将边界更改为渐变填充

这是密码笔

正如您将看到的，每一侧的垂直边框都能按预期工作，而水平边框则不能

编辑：我已经清除了代码笔的混乱，并创建了一个小提琴

谢谢你的帮助

请澄清：

/* Working */
.frame.leftFrame {
  top: 0px;
  left: 0px;
  border-left: 45px solid #EDEDED;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
  height: 100%;
  box-sizing: border-box;
}

.frame.leftFrame:hover{
  border-left: 45px solid #F1612F;
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;  
  -o-border-image:
    -o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  border-image:
     linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
  cursor: pointer;
}

/* Not Working */
.frame.topFrame {
  top: 0px;
  left: 0px;
  border-top: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.topFrame:hover{
  border-top: 45px solid #F1612F;
  content: "";
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
  -webkit-border-image: 
    -webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;  
  -o-border-image:
    -o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
  border-image:
  linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
  cursor: pointer;
}

---

在

.frame.topFrame中：悬停

将渐变从

底部

更改为

左侧

或

右侧

，以便渐变具有渲染空间。渐变适用于容器的总宽度或总高度，但只有45个像素显示渐变，这意味着它在那里，但只有轻微的变化。

Hi Karson。谢谢你的建议。不幸的是，我仍然在Chrome和Safari中看到相同的bug