border-radius 50% 安卓手机不是圆

最新推荐文章于 2023-04-28 00:14:16 发布
最新推荐文章于 2023-04-28 00:14:16 发布
阅读量551 收藏
点赞数
分类专栏： css 前端 文章标签： css border-radius 50%
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CamilleZJ/article/details/103071941
版权
前端 同时被 2 个专栏收录
123 篇文章 2 订阅
订阅专栏
css
18 篇文章 0 订阅
订阅专栏

如上小圆点给定相同的width和height，再设置border-radius: 50%

在IOS上看着正常，在andriod手机上有的是圆点有的是矩形的，主要是width和height太小了，在用rem等换算成px出现小数点导致的

解决：对于像素过小的可以直接用px而不用rem等单位

 

头像设置border-radius: 50%，并添加border，在手机上border用0.5px可能导致整个圆环不对称，类似于半个圆环这样，要用整数或大一点的border-width

 

 

CamilleZJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端border-radius绘制圆点不圆
风火燎原、
06-24 1370
问题 border-radius:50%画出来的圆点，在移动端上有的大，有的小，还有的不圆。 原因 一般情况下，只要你几个圆点用的同一个css，那就肯定不是你代码问。而且你查看ios中居然很完美，当然挺贵的安卓手机中基本上也没问题。造成这种原因的情况好几种： 使用了px转rem或者px转vw之类的插件，造成了计算过程中产生误差。 使用了rem或者vw之类像素单位，造成了计算过程中产生误差。 这个情况最操蛋，画圆宽高是奇数，而且圆点比较小，画出的圆就不规则了。 当然可能还有其他情况，毕竟安卓手机版
border-radius:50% 不圆
weixin_39137100的博客
03-01 1242
最近遇到的问题，当宽高小于16px的时候border-radius:50%(750的设计稿），多个圆点会出现某一个或者某几个不够圆的情况(猜测是rem转换的时候精度问题导致值多了或者少了）。 解决办法：将宽高用1倍尺寸写并且border-radius直接写宽高的二倍值，并且不要转rem单位 width:4PX; height:4PX; border-radius:8PX; ...
安卓中border-radius圆角展示不圆问题
zeroyulong的博客
12-17 4718
问题： 移动端写小圆圈在安卓中显示不圆，为了做适配，移动端通常采用rem作为单位，原因是rem换算成px是一个带小数点的值，安卓对小于1px的展示做了处理，从而导致圆角不圆，在ios下就没有这个问题。 解决方案： 使用svg, 既可以适配，即使再小的圆形也能在不同屏幕上完美展示 <!DOCTYPE html> <html> <head> <...
解决border-radius：50% 不圆的方法（由于使用了rem）
weixin_42060658的博客
12-04 6568
在写移动端的web页面的时候，发现使用了 border-radius 属性，在pc端正常显示，在手机端却发现无法不圆， 后面在网上查了一下，使用了rem单位设置了宽高，就会出现这种情况，解决方案有两种，一种是把rem换成px单位，另外一种是使用svg的方式 <svg class="back"> <!-- cx: 中心点的x轴的坐标，cy: 中心点的y轴坐标，r...
border-radius安卓版本变形问题
Kris1995的博客
10-15 464
问题： 使用border-radius:50%,或者border-radius的值与宽高相等，都可实现一个完美的圆形，但是在不同的安卓手机中，会有不同程度的变形（有的扁圆，有的大，有的小）；当使用px做为宽高的单位，border-radius:50%画出来的圆是不会变形的；但使用rem时，rem在换算为px时，会是一个带小数点的值，安卓对小于1px的做了处理（不同浏览器对小于1px的处理方式不同，有的采用四舍五入，有的大于某个值展示1px否则就舍去），从而导致圆角不圆；在ios下就没有这个问题。 解决方案：
border-radius：50%在安卓机上无效
不知不觉 | 笔记
01-30 3839
页面上写了个小红圆点，在电脑和iphone上正常的，但是在安卓手机上，红点变成了带圆角的正方形或长方形，不同安卓手机还有点不一样，代码如下： { background-color: #f1464a; width:.2rem; height:.2rem; border-radius:50%; } 后面百度了下，原来安卓部分低版本系统，不支持border-radiu
安卓java读取网页源码-problem-list:问题清单
06-06
使用border-radius:50%,或者border-radius的值与宽高相等，都可实现一个完美的圆形，但是在不同的安卓手机中，会有不同程度的变形（有的扁圆，有的大，有的小）；当使用px做为宽高的单位，border-radius:50%画出来的...
wxml2canvas微信根据wxml绘制海报
03-18
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-radius','box-sizing','line-height'属性绘制海报。 ##可以设置 1.data-index设置...
Android实现圆角矩形和圆形ImageView的方式
09-01
在提供的代码中，我们看到了自定义CircleImageView的属性声明，包括`type`（表示是圆形还是圆角矩形）、`round_Radius`（圆角半径）、`border_width`（边框宽度）和`border_color`（边框颜色）。这些属性可以在XML...
CSS3实战第一波 让我们尽情的圆角吧
09-25
对于其他浏览器，可能还需要添加`border-radius`属性，但在这个场景下，对于当前的高端手机浏览器，这个属性暂时是不必要的。 对于只有半边有圆角的对象，CSS3也提供了单独定义每个角落圆角大小的选项，例如： ```...
当以rem为单位时，使用border-radius画的圆，形状不圆
aas31158的博客
08-02 1184
移动端项目中，使用rem适配。碰到border-radius：50%写出的圆，形状不圆。 自己看了下，好像当rem换算出的px不为整数时，会出现这个情况。 网上搜索，尝试了border-radius：99999px、border-radius：6rem、border-radius：100%,但是无效。 后来的就只能使用px，然后用媒体查询完成适配。切图使用背景图片也行。 找...
2021-07-15 border-radius导致原点不圆
weixin_44138241的博客
07-15 429
移动端使用px转rem，结果导致border-radius的安卓手机圆点不圆。 问题发现： 接到一个需求，做一个轮播图，页面有圆点表示当前第几张图。vue的框架，使用了px转rem。发现在安卓手机，border-radius：50%，没有生效，圆点不圆。百度了之后发现有许多这样的问题。参照了各位大佬的解决方法，发现都能解决。以下，都是自己测试生效的方法。 解决方法：1.直接使用px，不转换。 2. 使用transform scale，先提前把px/rem相关的值放大一倍。然后用transform scale
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
VirgoYellow 的专栏
07-06 803
关于 Chrome 浏览器设置 border-radius 不成效的解决办法
border-radius不生效，elementplus组件圆角，vue3
weixin_57997644的博客
04-28 1361
原因是elementplus中组件的四个角溢出了，要把溢出的隐藏掉加入overflow: hidden; 只为记录学习遇到的问题
设置圆角border-radius值为50%安卓各版本会变形
热门推荐
希望能找到你的答案
06-01 5万+
在H5页面通过css样式设置圆角，比如border-radius：50%，这样的方式，在不同的安卓浏览器里，其表现的形式也会有不一样，会出现大小不一致，有些扁圆，有些大，有些小，但是在IOS系统不会出现问题。经排查，如果使用rem单位表示宽高，会有问题，如下：.car-radius { width: 0.2rem; height: 0.2rem; border-radius...
【uni-app】基础知识篇
weixin_58214412的博客
12-08 1926
使用 uni-app 开发 微信小程序， 1.uni-app的初体验 1.1 开发方式 使用 DCloud 公司提供的 HBuilderX 来快速开发 使用脚手架来快速搭建和开发 1.2 脚手架搭建项目 （这些命令都是可以执行的） 1. 全局安装 npm install -g @vue/cli 2. 创建项目 vue create -p dcloudio/uni-preset-vue my-project 3. 启动项目 npm run dev:mp-weixin 4. 微信小程
android 导入系统证书,安卓手机添加系统证书方法(HTTPS抓包)
最新发布
05-28
border-radius:要在 Android 手机上添加自定义证书，需要遵循以下步骤： 1. 下载证书：从 HTTPS 网 4px; font-size: 12px; color: #666; } .job-company { display: flex; align站下载证书，将其保存到您的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值