对正方形图border-radius:50%无效不能显示圆形而是一个有菱角的形状
发布于 5 年前 作者 mren 4693 次浏览 来自 问答

对正方形图片设置border-radius:50%实现边缘是圆形效果。结果在微信开发者工具和真机上都表现异常。

-原图是个正方形图片:

  • 当前 Bug 的表现(可附上截图)
  • 预期表现

外边缘应该类似这样是个圆

  • 复现路径
  • 提供一个最简复现 Demo

–html结构

<view>

<image class=‘test’ src=‘test.jpeg’></image>

</view>

–css样式文件

.test {

width: 50px;

height: 50px;

border-radius: 50%;

}

也试过对外层对view设置一样的宽高和border-radius: 50%;仍然表现出有菱角不是圆

3 回复

仔细看,这个是个圆,,旁边有白色,你图片的问题

看到白色空隙了吧……原来是这图片问题哎😂

哈哈,骗我们用你的图片吧

回到顶部