Html 过渡不'；不能使用边界图像和渐变

我正在使用带有

渐变的
边框图像
，效果很好，但它似乎不支持
过渡

对于本例，是否可以在悬停状态下实现
转换



div{
边框：10px纯蓝色；
高度：120px；
浮动：左；
过渡：1s全部；
边框图像：线性渐变（至底部、白色、蓝色）1100%；
}
div:悬停{
边界图像：线性渐变（至底部、天蓝色、蓝色）1100%；
}
否
这些属性不支持动画

但是，您可以想出另一种方法来实现这一点

也许你有两个包裹在某物周围，它们是两个不同的渐变，周围有填充物来模拟边框的外观。。。然后，具有渐变的元素具有不透明度，在悬停时会淡入淡出


不可能
这是不可能的，因为
线性渐变
是作为图像计算的，而不是实际的颜色

解决方案
尝试将
放在另一个可以用作边框的
中。然后外部
可以有动画背景

我发现了如何用JavaScript实现这一点

我最好的办法是让两个
叠在一起。底部
是目标渐变，顶部是起点。然后只需淡入顶部


#开始{
位置：绝对位置；
宽度：100px；
高度：100px；
z指数：1；
不透明度：1；
背景：线性梯度（红色、蓝色）；
过渡：不透明度0.5s；
}
#结束{
位置：绝对位置；
宽度：100px；
高度：100px；
背景：线性梯度（绿色、橙色）；
z指数：-1；
}
#开始：悬停{
不透明度：0；
}
开始
结束
正如其他人已经告诉您的，现在还不可能转换渐变。伪造效果的最好方法是使用不透明，它可以转换。您不需要添加任何元素，但是
：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;
}

还有一个例子：
仍然不可能为渐变设置动画。你可以尝试使用一个伪类方法tho:）谢谢@Terry，我会尝试的！正确，但我认为您至少应该嵌套元素，甚至更好，根本不添加任何标记，而是使用伪元素。这将是一个b*tch来维护和定位。“作为图像计算”有助于理解这一点。这正是我要寻找的。正如Terry之前所建议的那样，我成功地使用了伪类。这是最好的解决办法。
.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;
}

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