过渡不适用于边界图像和渐变。

Question

我正在与border-image一起使用gradient，它运行得很好，但似乎不支持transition。

对于此示例，是否有可能在悬停时实现transition？

JsFiddle

​

div {
    border:10px solid blue;
    height:120px;
    float:left;
    transition:1s all;
    border-image: linear-gradient(to bottom, white, blue) 1 100%;
}
div:hover {
    border-image: linear-gradient(to bottom, skyblue, blue) 1 100%;
}

<div></div>

​

Answer 1

正如其他人已经告诉过您的那样，不可能转换渐变(目前为止)。假装效果的最好方法是与不透明一起工作，这是可以转换的。您不需要添加任何元素，但是，:before和:after伪元素会做得很好。请看下面的css：

div {
    height:120px;
    width:10px;
    padding: 0 10px;
    background: salmon;
    background-clip: content-box;
    position: relative;
}
div:after, div:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content:'';
}
div:after {
    background: linear-gradient(to bottom, white 0%, blue 100%);
    z-index: -1;
    transition: opacity 1s;
}
div:before {
    background: linear-gradient(to bottom, skyblue 0%, blue 100%);
    z-index: -2;
}
div:hover:after {
    opacity: 0;
}

还有一个例子：https://jsfiddle.net/et0ffrqx/2/

Answer 2

不可能

这是不可能的，因为linear-gradient是作为图像计算的，而不是实际的颜色。

解决方案

尝试将<div>放入可以充当边框的另一个<div>中。然后外部<div>可以有一个动画背景。

我发现这个密码演示了如何使用JavaScript来完成这一任务。

我对你来说最好的办法是把两个<div>堆在一起。底部<div>为目标梯度，顶部为起始点。然后淡出顶部的<div>

​

#start {
  position:absolute;
  width: 100px;
  height: 100px;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(red,blue);
  transition: opacity 0.5s ease;
}

#end {
  position:absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(green,orange);
  z-index: -1;
}

#start:hover {
  opacity: 0;
}

<div id="start">Start</div>
<div id="end">End</div>

​

片段演示了渐变之间淡出的一种简单方法。不是完美，但更流畅，没有JavaScript。把你的其他东西放在<div>的一边，根据你的需要调整宽度和高度。

还可以尝试使用:before和:after来避免重复的div

Answer 3

不是

这些属性不支持动画。

然而，您可以想出另一种方法来直观地完成这一任务。

也许你有两个包装的东西，他们是两个不同的梯度，并有填充，以模拟一个边界的外观.然后，具有梯度的元素具有不透明度，在悬停时会逐渐消失。

https://jsfiddle.net/sheriffderek/5uoypaoo/

<div class="gradient-1">
    <div class="gradient-2"></div>
    <div class="thing"></div>
</div>

​

.thing {
    position: relative;
    width: 200px;
    height: 200px;
    background: white;
    float: left;
}

.gradient-1 {
    position: relative;
    background: linear-gradient(45deg, pink, blue);
    opacity: 1;
    padding: 1rem;
    float: left;
}

.gradient-1:hover .gradient-2 {
    opacity: 1;
}

.gradient-2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, lightgreen, orange);
    opacity: 0;
    transition: opacity 1s ease-in-out;
}