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个像素来显示渐变，这意味着它只在那里，但只是轻微。

水平边框渐变

1 个答案: