详解css3使用transform出现字体模糊的解决办法


Posted in HTML / CSS onOctober 16, 2020

这个问题很奇葩,话不多少直接上代码:

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

详解css3使用transform出现字体模糊的解决办法

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

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

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

width: 404px;
height: 226px;

详解css3使用transform出现字体模糊的解决办法

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

HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 #HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 #HTML / CSS
animation和transition的区别
Oct 12 #HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 #HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 #HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
You might like
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
整理Python中的赋值运算符
2015/05/13 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
对python 调用类属性的方法详解
2019/07/02 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
巾帼文明岗申报材料
2014/05/01 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书