我有一個帶有傾斜效果的按鈕,裡面有一個文本,當我懸停該按鈕時,按鈕旁邊會出現兩行。
有程式碼,將滑鼠懸停在按鈕上直到看到它,這是一個非常隨機的副作用。
我認為這是 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 行似乎是一種解決方法,但它使我的系統上的按鈕文字有點模糊。這可能就是您正在尋找的內容。
據說它改變了元素的瀏覽器動畫優化。
請參閱下面的程式碼片段,它不再顯示線條了: