在Android 4+和iOS 6.0上，边框半径不会弯曲

Question

我有一个带双边框的圆圈。内部白色边框由border属性设置。外部灰色边框由box-shadow属性设置。在Android 4+和iOS 6.0上，外边框正确弯曲但内边框不是。

正确：

不正确：

以下是代码：

-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

-webkit-border-radius: 50%;
border-radius: 50%;

-webkit-box-shadow: 0 0 0 2px #b2b0b0;
-moz-box-shadow: 0 0 0 2px #b2b0b0;
box-shadow: 0 0 0 2px #b2b0b0;

border: 3px solid white;
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;

为什么border-radius会正确影响box-shadow而不影响border？

Answer 1

我到达了这个解决方法：

在div中包裹元素：

<div class="double-border">
  <img />
</div>

并将双边框应用于包装器：

.double-border {

   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;

   -webkit-border-radius: 50%;
   border-radius: 50%;

  -webkit-box-shadow: 0 0 0 2px #b2b0b0;
  -moz-box-shadow: 0 0 0 2px #b2b0b0;
  box-shadow: 0 0 0 2px #b2b0b0;

  border: 3px solid white;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}