Html CSS过渡边界即时恢复

为什么边界会瞬间消失，而不像其他属性那样缓慢消失

注意：在ie中，边框立即出现，而不是2秒的延迟

。图{
高度：160px；
宽度：160px；
背景色：红色；
过渡性质：全部；
过渡时间：2s；
}
.图：悬停{
背景颜色：蓝色；
边框：10px纯红；
颜色：黄色；
}

Stackoverflow

是

none

这意味着边框不会向后转换，因为当

边框样式

设置为

无

时，边框根本不会显示。如果将初始的

边框样式

属性值设置为类似于

实体

，则它将按预期进行转换

还值得指出的是，默认值是

medium

，默认值是（这基本上意味着它将是

color

属性设置为的任何值）

。图{
高度：160px；
宽度：160px；
背景色：红色；
边框样式：实心；
边框宽度：0；
过渡性质：全部；
过渡时间：2s；
}
.图：悬停{
背景颜色：蓝色；
边框：10px纯红；
颜色：黄色；
}

---

Stackoverflow

您需要在

class

和

class:hover

.figure {
    height: 160px;
    width: 160px;
    background-color: red;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}

.figure:hover{
    background-color: blue;
    border: 10px solid pink;
    color: yellow;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}

---

将

转换

添加到

类

及其

：hover

会使

div

恢复到其正常状态，同时在

hover

上更改！这很有道理！谢谢更准确的解释是边界样式根本无法转换。甚至不能在实线和虚线之间转换。当然，转换到或从任何3d外观的边框样式都将是一个挑战，使其外观好看，更不用说标准化了。另请参见，同样的事情适用于轮廓样式。

.figure {
    height: 160px;
    width: 160px;
    background-color: red;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}

.figure:hover{
    background-color: blue;
    border: 10px solid pink;
    color: yellow;
    transition: all linear 2s;
    -webkit-transition: all linear 2s;
    -moz-transition: all linear 2s;
}