我有一个带有倾斜效果的按钮,里面有一个文本,当我悬停该按钮时,按钮旁边会出现两行。
有代码,将鼠标悬停在按钮上直到看到它,这是一个非常随机的副作用。
我认为这是 Chrome 的问题,但我不确定。这是问题的图片:https://prnt.sc/hafHhDOHntco
.button-skew { position: relative; width: fit-content; padding: 6px 40px; border-radius: 5px; transform: skewX(-7.5deg); background: blue; transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8); } .button-skew:hover { padding: 6px 60px; transform: skewX(-7.5deg); background: red; transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8); } p { position: relative; font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: 0em; text-align: center; color: white; transform: skewX(7.5deg); }
<div class="button-skew"> <p>Contact us</p> </div>
嗯..这确实是一个渲染错误。我发现一条 CSS 行似乎是一种解决方法,但它使我的系统上的按钮文本有点模糊。这可能就是您正在寻找的内容。
据说它改变了元素的浏览器动画优化。
请参阅下面的代码片段,它不再显示线条了: