html – 如何避免盒子阴影过渡时闪烁？

概述我有CSS在悬停时动画框阴影.它适用于Firefox,但会导致Opera / Chrome浏览器出现闪烁现象. 是否可以在没有额外标记和没有伪元素的情况下修复它？ .hover { color: #fff; background: rgba(0, 0, 0, 0.5); display: block; display: inline-block; text 我有CSS在悬停时动画框阴影.它适用于firefox,但会导致Opera / Chrome浏览器出现闪烁现象.

是否可以在没有额外标记和没有伪元素的情况下修复它？

.hover {    color: #fff;    background:  rgba(0,0.5);    display: block;    display: inline-block;    text-align: left;    cursor: pointer;    Box-shadow: inset 0 0 0 0 #fff;    -webkit-Transition: Box-shadow linear 0.5s,color linear 0.5s;    -moz-Transition: Box-shadow linear 0.5s,color linear 0.5s;        Transition: Box-shadow linear 0.5s,color linear 0.5s;}.hover:hover {   Box-shadow: inset 424px 0 0 0 #fff;   color: #000;}

<h1 >This is some really looong Title!</h1>

解决方法 尝试设置.01px的Boxshadow

.hover {max-wIDth: 400px;    color: red;    background-color:  blue;    display: table;    text-align: left;    cursor: pointer;    Box-shadow: inset 0 0 0 0.01px white;        Transition: all ease 5.5s;}.hover:hover {    background-color:  blue;   Box-shadow: inset 440px 0 0 0 #fff;   color: #000;}

<h1 >This&nbsp;is&nbsp;some&nbsp;really&nbsp;looong&nbsp;Title!</h1>

.hover {    color: #fff;    background:  rgba(0,0.5);    display: block;    display: inline-block;    text-align: left;    cursor: pointer;    Box-shadow: inset 0 0 0 0.01px #fff;    -webkit-Transition: Box-shadow linear 0.5s,color linear 0.5s;}.hover:hover {   Box-shadow: inset 424px 0 0 0.01px #fff;   color: #000;}

<h1 >This is some really looong Title!</h1>

总结

以上是内存溢出为你收集整理的html – 如何避免盒子阴影过渡时闪烁？全部内容，希望文章能够帮你解决html – 如何避免盒子阴影过渡时闪烁？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。