解决border-radius：50% 不圆的方法（由于使用了rem）

最新推荐文章于 2023-07-15 19:44:14 发布
最新推荐文章于 2023-07-15 19:44:14 发布
阅读量6.8k 收藏 3
点赞数 3
分类专栏： 工具代码 文章标签： border-radius不圆解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42060658/article/details/103385110
版权

在写移动端的web页面的时候，发现使用了 border-radius：50% 属性，在pc端正常显示，在手机端却发现无法不圆，
后面在网上查了一下，使用了rem单位设置了宽高，就会出现这种情况，解决方案有两种，一种是把rem换成px单位，另外一种是使用svg的方式

    <svg class="back">
   		<!--  cx: 中心点的x轴的坐标，cy: 中心点的y轴坐标，r为圆的半径，fill为圆的背景色 -->
        <circle cx=
最低0.47元/天 解锁文章
CSS 使用border-radius属性实现标签元素变为正圆、椭圆、圆角矩形（可以自定义4个角的圆角大小）
旭东怪的博客
09-12 2万+
1 使用详解 border-radius 说明：给元素的边框设置圆角，默认不设置圆角为矩形，可以给元素设置圆角将元素变为正圆、椭圆或圆角矩形 语法： （1）border-radius：50%，给元素设置50%的圆角大小。 （2）border-radius：40% 30%，给元素的左上角、右下角设置40%的圆角大小，给元素的右上角、左下角设置30%的圆角大小。 （3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，
border-radius:50% 不圆
weixin_39137100的博客
03-01 1564
最近遇到的问题，当宽高小于16px的时候border-radius:50%(750的设计稿），多个圆点会出现某一个或者某几个不够圆的情况(猜测是rem转换的时候精度问题导致值多了或者少了）。 解决办法：将宽高用1倍尺寸写并且border-radius直接写宽高的二倍值，并且不要转rem单位 width:4PX; height:4PX; border-radius:8PX; ...
移动端border-radius绘制圆点不圆
风火燎原、
06-24 1609
问题 border-radius:50%画出来的圆点，在移动端上有的大，有的小，还有的不圆。 原因 一般情况下，只要你几个圆点用的同一个css，那就肯定不是你代码问。而且你查看ios中居然很完美，当然挺贵的安卓手机中基本上也没问题。造成这种原因的情况好几种： 使用了px转rem或者px转vw之类的插件，造成了计算过程中产生误差。 使用了rem或者vw之类像素单位，造成了计算过程中产生误差。 这个情况最操蛋，画圆宽高是奇数，而且圆点比较小，画出的圆就不规则了。 当然可能还有其他情况，毕竟安卓手机版
2021-07-15 border-radius导致原点不圆
weixin_44138241的博客
07-15 535
移动端使用px转rem，结果导致border-radius的安卓手机圆点不圆。 问题发现： 接到一个需求，做一个轮播图，页面有圆点表示当前第几张图。vue的框架，使用了px转rem。发现在安卓手机，border-radius：50%，没有生效，圆点不圆。百度了之后发现有许多这样的问题。参照了各位大佬的解决方法，发现都能解决。以下，都是自己测试生效的方法。 解决方法：1.直接使用px，不转换。 2. 使用transform scale，先提前把px/rem相关的值放大一倍。然后用transform scale
border-radius 50% 安卓手机不是圆
CamilleZJ的博客
11-14 646
如上小圆点给定相同的width和height，再设置border-radius: 50% 在IOS上看着正常，在andriod手机上有的是圆点有的是矩形的，主要是width和height太小了，在用rem等换算成px出现小数点导致的 解决：对于像素过小的可以直接用px而不用rem等单位 头像设置border-radius: 50%，并添加border，在手机上border用0.5p...
border-radius:50%;
最新发布
04-09
然后，用户提到的移动端使用rem导致不圆的问题，引用[4]中提到的情况，可能需要解释原因和解决方案。比如，使用rem单位时，计算后的宽高可能不是精确的数值，导致50%无法形成正圆，这时候换成px或使用SVG可以解决。...
翻译.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }
05-20
这段代码定义了一个下拉菜单的样式： - `position: absolute;` 将菜单定位到页面上的绝对位置。 - `top: 100%;` 将菜单的顶部与其父元素底部...- `border-radius: 0.25rem;` 设置菜单的圆角半径为 0.25 个字号单位。
dialog { border-width: 0px; border-radius: 1rem; padding: 1rem; }
03-28
The border radius is set to 1rem, which creates rounded corners for the dialog box. The padding is set to 1rem, which adds some space between the content of the dialog and its edges.
.left { margin-left: 10px; position: absolute; left: 0; } .rightrr { position: absolute; right: 36px; line-height: 66px; color: #b1b1b1; font-size: 20px; } .right { font-weight: bold; margin-left: 10px; position: absolute; left: 76px; width: 66px; line-height: 66px; } .ull { margin: 10px; width: 100%; padding: 0; position: relative; justify-content: space-around; height: 66px; } .ull>div>img { width: 66px; height: 66px; } .head { width: 100%; ; } .head>ul { padding: 0; margin: 0; } .head>ul>li { border: 1px solid #f8e3c6; list-style: none; height: 100%; } body { margin: 0; padding: 0; } .member { width: 100%; position: relative; margin-bottom: 15px; } .header-con { padding: 10px; background-color: #fff; } .user-info { position: relative; overflow: hidden; width: 100%; height: 120px; background: linear-gradient(90deg, #28a2ff, #ffd787); box-shadow: 0 0.1rem 0.25rem #f8e3c6; } .avatar-con { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); } .avatar { width: 60px; height: 60px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 15); border: 1px solid hsla(0, 0%, 100%, 0.4); border-radius: 50% 50%; } .image-info { width: 100%; height: 100%; } .person-con { position: absolute; left: 90px; top: 50%; transform: translateY(-50%); color: #fff; }</style>
06-05
这段代码是一段CSS样式代码，用于设置网页中的样式和布局。它包括了头部样式的设置、成员信息的布局以及用户头像和个人信息的设置等。具体来说，它定义了一些类和属性，如头部样式的ul标签、成员信息的div标签以及...
微信小程序border-radius不圆滑
qq_29644709的博客
07-15 1188
border-radius可以设置：百分比或者像素值。2.使用百分比不够圆滑。1.使用像素值比较圆滑。
移动端 border-radius 绘制圆点不够圆 如何解决
CloudJay的博客
02-14 3196
在做项目中,经常会遇到用css绘制像素小圆点的需求,如下代码 .dotted{ width:4px; height:4px; border-radius:50%; background:red; } 在一般情况下,这种代码是没有问题的,但是如果你使用了px2rem之类的插件,就会发现在移动端上的圆点有的大,有的小.十分的难看 个人猜测原因是因为转换工具转出来的单位都是带小数点的,在css...
css border-radius: 50%; 失效的
weixin_41886801的博客
09-01 1834
当 dom 宽高为单数的时候会失效，当单位为 rem 的时候会失效。 圆圈的正确使用方法： 使用 px做单位，宽高取偶数，radius 取值远大于 dom 宽高即可。
设置圆角border-radius值为50%安卓各版本会变形
热门推荐
希望能找到你的答案
06-01 5万+
在H5页面通过css样式设置圆角，比如border-radius：50%，这样的方式，在不同的安卓浏览器里，其表现的形式也会有不一样，会出现大小不一致，有些扁圆，有些大，有些小，但是在IOS系统不会出现问题。经排查，如果使用rem单位表示宽高，会有问题，如下：.car-radius { width: 0.2rem; height: 0.2rem; border-radius...
在安卓手机中rem单位border-radius:50%画圆变形的解决方案
細水、長流√的专栏
04-22 2291
罪魁祸首 i{ display inline-block width .08rem height .08rem background-color #D0021B border-radius 50% } 画了个圆，在ios中效果很理想。但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过ios（毕竟安卓版...
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
VirgoYellow 的专栏
07-06 961
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
CSS border-radius:50%和100%的区别
司马懿的西山居
01-30 8311
转自知乎 https://zhuanlan.zhihu.com/p/20128284?columnSlug=FrontendMagazine用 CSS 画一个完美的圆在 Web 上我们常常会看到很多用到圆形的地方，比如带背景色的或者图片是圆形的。通常我们都是用 CSS 的 border-radius 属性实现圆形：先画一个方形，然后将它的 border-radius 设置成50%。但是为什么偏偏是5
Qt 之 样式表的使用——设置样式的方法
前行之路还需前行
03-09 5万+
一、简述我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面，关于如何使用样式表的资料也很多，样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表，Qt帮助文档中提供了非常好的例子以及详细介绍，非常适合学习。同时呢，也不能光看文档中是如何设置样式，我们要亲自动手做一遍才能理解得更加透彻，好了闲话不多说，下面就我在日常开发过程中对样式表的使用做一下简单的总结。二、开始总...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值