详解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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 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多线程抓取网页实现代码
2010/07/22 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
拖动一个HTML元素
2006/12/22 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
jQuery extend()详解及简单实例
2017/05/06 jQuery
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
简历中自我评价分享
2013/10/09 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
志愿者活动总结
2014/04/28 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
新闻稿标题
2015/07/18 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
外出听课学习心得体会
2016/01/15 职场文书