最近，遇到了CSS在使用transform后出现字体模糊的情况，对此针对这个问题给大家分享一下该如何解决？解决方法是什么？废话不多说，下面我们来看代码。

.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样式，得出的页面居然字体那么模糊：

上网查了一下，好像是说和浏览器渲染有问题，transform里的值不能设置成基数，但我这里摆明就不是基数：

transform: translate(-50%, -50%);

后来我乱改了一下，把width和height改成偶数就可以了。

width: 404px;
height: 226px;

    以上就是关于CSS在使用transform后出现字体模糊的情况的解决方法啦，有需要的朋友可以参考，希望能帮助到大家，想要了解更多CSS的内容，可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中ex表示是什么，怎么使用

  css中ex是一种相对长度单位，表示相对于当前字体的“x-height”长度，也就是相对于字符“x”的高度，通常为字体高度的一半，语法为“大小属性:数值ex;”。

• iframe标签定义和用法是什么

  iframe标签定义和用法是什么？HTML中关于iframe标签的使用方法不知道你了解过没有，这里讲述了属性、透明、自适应高度等方面的知识点，有需要可以看看一看。

• CSS中transition属性的基本用法是什么，如何做一个简单动画

  这篇文章主要介绍了css简单动画之transition属性详解,需要的朋友可以参考下

• CSS盒子模型属性有哪些，表示什么意思

  内容区，是盒子模型必备的组成部分。内边距，指内容区和边框之间的空间。外边距，指两个盒子之间的距离，可能是子元素和父元素之间，也可能时两个兄弟元素之间。边框。

• CSS3动画新特性有哪些，含义和用法是什么

  这篇文章主要介绍了CSS3动画和HTML5新特性详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下