我有一個帶有傾斜效果的按鈕，里面有一個文本，當我懸停按鈕時，按鈕旁邊會出現兩行。
有代碼，懸停按鈕直到你看到它，這是一個非常隨機的副作用。
我認為這是 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>uj5u.com熱心網友回復：
嗯..這確實是一個渲染錯誤。我發現一條 CSS 行似乎是一種解決方法，但它使我的系統上的按鈕文本有點模糊。這可能是您正在尋找的。
據說它改變了元素的瀏覽器影片優化。
will-change: transform;
請參閱下面的片段，它不再為我顯示這些行：
.button-skew {
position: relative;
width: fit-content;
padding: 6px 40px;
border-radius: 5px;
transform: skewX(-7.5deg);
background: blue;
transition: background 0.35s cubic-bezier(.47, 1.64, .41, .8),
padding 0.35s cubic-bezier(.47, 1.64, .41, .8);
will-change: transform;
}
.button-skew:hover {
padding: 6px 60px;
background: red;
}
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521603.html
標籤：htmlcss粗鲁的