詳解css3使用transform出現(xiàn)字體模糊的解決辦法
發(fā)布時間：2020-10-16 17:15:42 作者：tyilack_小小黑 
我要評論
我要評論這篇文章主要介紹了詳解css3使用transform出現(xiàn)字體模糊的解決辦法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
這個問題很奇葩，話不多少直接上代碼：
.g-dialog-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
width: 405px;
background-color: #ffffff;
height: 226px;
-webkit-box-shadow: 0 0 2em #5191f1;
-moz-box-shadow: 0 0 2em #5191f1;
box-shadow: 0 0 2em #5191f1;
border-radius: 3px;
z-index: 9999;
}
上面這css樣式，得出的頁面居然字體那么模糊：
上網(wǎng)查了一下，好像是說和瀏覽器渲染有問題，transform里的值不能設置成基數(shù)，但我這里擺明就不是基數(shù)：
transform: translate(-50%, -50%);
后來我亂改了一下，把width和height改成偶數(shù)就可以了。
width: 404px; height: 226px;
到此這篇關于詳解css3使用transform出現(xiàn)字體模糊的解決辦法的文章就介紹到這了,更多相關css3 transform字體模糊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了CSS3 translate導致字體模糊的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-30
