详解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字体效果的设置方法小结
Jun 13 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
php学习笔记之 函数声明
2011/06/09 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
stripos函数知识点实例分享
2019/02/11 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python基础教程之对象和类的实际运用
2014/08/29 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python写的一个简单监控系统
2015/06/19 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python简单贪吃蛇开发
2019/01/28 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
实习鉴定范文
2013/12/19 职场文书
德育标兵事迹材料
2014/08/24 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL