水平边界渐变

Question

这可能看起来微不足道，但我似乎无法在任何地方找到答案。我正在尝试对悬停时的渐变填充进行边框更改。

这是代码笔； https://codepen.io/gavdraws/pen/LyWJML

如您所见，每一侧的垂直边框按预期工作，而水平边框则没有。

编辑：我已经清除了代码笔的混乱并创建了一个小提琴； https://jsfiddle.net/6dwx4eos/

感谢所有帮助。

澄清：

/* 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;
}

Answer 1

在.frame.topFrame:hover 中，将渐变从bottom 更改为left 或right，以便渐变有渲染空间。渐变适用于容器的总宽度或高度，但只有 45 个像素来显示渐变，这意味着它存在但只有一点点。