android - 圆形框上的边框未在 Android/Chrome 上显示

Question

看看这支笔:https://codepen.io/anon/pen/aweEZN

HTML:

<div class="circle"></div>

CSS:

.circle {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 100%;
  border: 10px solid #333;
  border-radius: 50%;
}

在桌面浏览器上，一切都按预期工作，但在我的手机上，框周围的边框没有显示(我猜这是浏览器错误)。我使用的是 Android 6.0.1 和 Chrome 版本 59.0.3071.125。

有人可以帮我解决吗？

Answer 1

有些浏览器不支持某些 CSS3 属性。尝试将它们分成各自的属性，如下所示:

CSS:

.circle {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 100%;
  border-width: 10px;
  border-style: solid;
  border-color: #333;
  border-radius: 50%;
}