详解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实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
网上抓的一个特效
2007/05/11 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Python os模块学习笔记
2015/06/21 Python
python之django母板页面的使用
2018/07/03 Python
对python调用RPC接口的实例详解
2019/01/03 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python3 实现调用串口功能
2019/12/26 Python
Python如何省略括号方法详解
2020/03/21 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
无工作证明怎么写
2015/06/15 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL