html - 过渡不适用于边框图像和渐变

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/