您现在的位置是：网站首页> 编程资料编程资料

详解css3使用transform出现字体模糊的解决办法CSS3 translate导致字体模糊的实例代码

2021-09-03 1094人已围观

简介 这篇文章主要介绍了详解css3使用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;

这里写图片描述

到此这篇关于详解css3使用transform出现字体模糊的解决办法的文章就介绍到这了,更多相关css3 transform字体模糊内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：css3实现文字首尾衔接跑马灯的示例代码结合 CSS3 transition transform 实现简单的跑马灯效果的示例

下一篇：编程式处理Css样式的示例代码HTML外部样式表如何引入CSS样式详解CSS3中常用的样式【基本文本和字体样式】CSS 选择所有子元素添加样式的方法CSS常用样式之绘制双箭头的示例代码详解中文字体在CSS样式中font-family对应的英文名称CSS实现鼠标悬停改变其他标签样式的示例代码解决ElementUI自定义CSS样式不生效的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网