border-radius 在最新的 UCWEB 及微信里竟然不完美支持

2014-11-25 20:03:26 +08:00
 shpasspass
如果给图片加了width:50px;height:50px;border-radius:25px;-webkit-border-radius:25px;border:3px solid #fff;
在微信及UCweb里会出现下图的情况。白色边框竟然不是圆形的！！！

而在手机版的chrome里却一切正常。这是bug?
6170 次点击
所在节点    问与答
11 条回复
crs0910
2014-11-25 20:19:01 +08:00
图片中不就是圆的吗？你是说不够圆？

算上 border 应该是 border-radius:28px; 或者直接 border-radius:50%;
Sivan
2014-11-25 20:23:53 +08:00
border-radius:50%;
shpasspass
2014-11-25 20:55:02 +08:00
@crs0910
@Sivan
多截了几张图做比较，就是这个border的区别
kmvan
2014-11-25 21:13:36 +08:00
系统自带浏览器支持，他们这些没有内置内核的壳子就支持。
Sivan
2014-11-25 21:21:29 +08:00
LZ 是什么系统测的？


@kmvan 会不会是安卓下 UC 设成了默认浏览器，然后微信走了 UC……
wwqgtxx
2014-11-25 21:57:17 +08:00
@Sivan 不可能，微信调用webview是不可能调用uc的，安卓不支持像win那样调用别的程序的lib
安卓的webview在4.0之前是webkit，之后是chromium的修改版，4.4之后应该完全和原版chromium相同
而uc浏览器是完全用自己编译的webkit内核
所以不一样是很正常啊
crs0910
2014-11-25 22:03:06 +08:00
这个不知道为什么，你可以试试 border-radius:9999px;
或者干脆不用border，改用 box-shadow 来实现。
crs0910
2014-11-25 22:10:08 +08:00
再不行的话，img 外面套多个 div，把 border 和 border-radius 设置到 div 上。 img 就只加 border-radius 。我自己的手机测试是可以的。Android 4.3
shpasspass
2014-11-25 23:20:23 +08:00
安卓4.3的，刚才用了crs0910的方法，算是用障眼法成功了~谢谢了。
不过ucweb和微信竟然对border-radius不完美支持，也是醉了。
xinple
2014-11-25 23:23:53 +08:00
老的webkit不支持border-radius: 50% 的，只能把数值设大一点
如果是border-box, 那就是25px，如果是content-box，那就是28px

然后doctype 使用 <!DOCTYPE html>
你截图看不出doctype用的是html4.0什么版本的，但是 <!DOCTYPE html> 是目前最佳的
chairuosen
2014-11-25 23:46:37 +08:00
不要给img加Border

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/149237

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX