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