元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法:
1、将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale(.5);transform-origin: 0% 50%进行缩放。
2、将元素rem单位换位px为单位。

/*方法1*/
.ellipsisDot {
display: inline-block;
width: .2rem;
height: .2rem;
background: #C6C6C6;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5);
-moz-transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
} /*方法2*/
.ellipsisDot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #C6C6C6;
margin-left: 3px;
}

以rem为单位,数值较小,border-radius:50%部分浏览器渲染不圆方法的更多相关文章

  1. 关于 rem 作为单位设置大小

    rem是相对长度单位.相对于根元素(即html元素)font-size计算值的倍数htm{font-size: 62.5%;}根元素(html)先设置一个font-size,一般情况下为了容易计算re ...

  2. 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

    20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...

  3. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  4. 小韦系统装工行网银U盾驱动的方法

    小韦系统装工行网银U盾驱动的方法 拷贝文件.bat @echo 开始注册echo n|copy /-y scarddlg.dll %windir%\system32\echo n|copy /-y w ...

  5. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

    Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...

  6. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

  7. 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由

    前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...

  8. 微信小程序:封装全局的promise异步调用方法

    微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...

  9. JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    本文实例讲述了JS使用正则表达式获取小括号.中括号及花括号内容的方法.分享给大家供大家参考,具体如下: JS 正则表达式 获取小括号 中括号 花括号内的内容 <!DOCTYPE html> ...

随机推荐

  1. SpringBoot集成SpringBootDataElasticSearch

    先放出依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  2. zookeeper 负载均衡和 nginx 负载均衡区别?

    zk 的负载均衡是可以调控,nginx 只是能调权重,其他需要可控的都需要自己写插件:但是 nginx 的吞吐量比 zk 大很多,应该说按业务选择用哪种方式.

  3. 关于TP框架

    TP的特性有哪些? 1.多表查询非常方便,在model中几句代码就可以完成对多表的关联操作. 2.融合了smarty模板,使前后台分离 3.支持多种缓存技术,尤其对memcache技术支持非常好 4. ...

  4. ES6技术之“判空方案”

    一.常用方案 直接判断 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 翻译:HTML5与HTML4的区别

    本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...

  6. Hibernate快速上手

    一. Hibernate介绍 1. Hibernate简介 Hibernate是一个开放源码的对象-关系映射(ORM)框架,他对JDBC进行了轻量级封装,开发人员可以使用面向对象的编程思想来进行持久层 ...

  7. js判断是否为电话号码

    /* 用途:检查输入字符串是否符合国内固话或者传真格式 输入: s:字符串  格式例如:030-4557777返回: 如果通过验证返回true,否则返回false */ function isTel( ...

  8. in a frame because it set 'X-Frame-Options' to 'sameorigin'

    不是所有网站都给  iframe嵌套的,  有的网站设置了  禁止嵌套!!! 浏览器会依据X-Frame-Options的值来控制iframe框架的页面是否允许加载显示出来, 看你们公司这么设置了!! ...

  9. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  10. 【Azure 云服务】Azure Cloud Service (Extended Support) 云服务开启诊断日志插件 WAD Extension (Windows Azure Diagnostic) 无法正常工作的原因

    问题描述 在Azure中国区上面创建一个云服务(外延支持)后,根据官方文档(在云服务(外延支持)中应用 Azure 诊断扩展: https://docs.azure.cn/zh-cn/cloud-se ...