android - 边框在 Android 4+ 和 iOS 6.0 上不以 border-radius flex

Question

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

正确:

不正确:

代码如下:

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