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

我有一个带双边框的圆。内部白色边框由

border

属性设置。外部灰色边框由

box shadow

属性设置。在安卓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

？

我找到了这个解决方法：

在div中换行元素：

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

---

问题可能是边界半径设置为purcentage。你试过使用像素值吗？使用像素值也有相同的结果。将元素包装在一个div中，并对该div应用双边框修复了问题。很高兴它现在可以工作了。你应该发布你的解决方案并接受它。谢谢。回答如下。我发现此技术不适用于使用

border

属性应用的单个边框。相反，请使用实心长方体阴影作为替代。

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