Question

为什么边界会像其他属性一样瞬间消失而不是慢慢消失？

注意：即边界瞬间出现而不是2秒延迟。

.figure {
	height: 160px;
	width: 160px;
	background-color: red;
	transition-property: all;
	transition-duration: 2s;
}

.figure:hover{
	background-color: blue;
	border: 10px solid pink;
	color: yellow;
}

<div class='figure'>Stackoverflow</div>

Answer 1

initial value of the border-style property为none。

这意味着边框不会过渡，因为当border-style设置为none时，根本不会显示边框。如果您将初始border-style属性值设置为solid，那么它将按预期进行转换。

值得指出的是，默认border-width property值为medium，默认border-color property值为currentColor（这实际上意味着它将是{{} 1}}属性设置为）。

color

.figure {
  height: 160px;
  width: 160px;
  background-color: red;
  border-style: solid;
  border-width: 0;
  transition-property: all;
  transition-duration: 2s;
}
.figure:hover {
  background-color: blue;
  border: 10px solid pink;
  color: yellow;
}

Answer 2

您需要在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;
}

将transition添加到class及其:hover，可使div恢复到正常状态，同时更改为hover < / p>

CSS过渡边界瞬间恢复

2 个答案: