CSS 边框粗细过渡

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15369970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:00:28  来源:igfitidea点击:

Border thickness transition

csscss-transitions

提问by Sam

Is there a way to ease-in-out between 2 border thicknesses?

有没有办法在 2 个边框厚度之间缓出?

My code:

我的代码:

nav a {
border-bottom: 1px solid #AADA4B;
}


nav a:hover {
border-bottom: 3px solid #AADA4B;
}

Thanks very much for the help. Sam.

非常感谢您的帮助。山姆。

回答by BoltClock

Sure, just transition borderor border-widthon the aelement:

当然,只需过渡borderborder-widtha元素上:

nav a {
/* -moz-, -o-, -webkit- prefixes omitted for brevity */
transition: border-width 0.1s ease-in-out;
border-bottom: 1px solid #AADA4B;
}