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%;
}