Safari中的CSS border-radius + box-shadow

Question

我创建了一个CSS类来显示带有边框和阴影的图像。在Chrome中，Firefox一切正常，但Safari显示错误。

使用的代码可以在fiddle或更低版本中找到：

img {
    width: 200px;
    height: 200px;
    border: 5px solid #DDD;
    border-radius: 100px;
    box-shadow: 0 7px 10px #CCC;
}

如何在Safari中使用？

屏幕截图（首先是Chrome，第二个是Safari）：

Answer 1

我在这里修改了你的小提琴：http://jsfiddle.net/Y2ZGR/3/

HTML：

<div class="image-holder">
    <img src="http://data1.whicdn.com/images/33153622/original.jpg" />
</div>

CSS：

img, .image-holder {
    width: 200px;
    height: 200px;
}

img {
    border-radius: 100px;
      -webkit-border-radius: 100px; 
      -moz-border-radius: 100px;
    -khtml-border-radius: 100px;
}

.image-holder {
    border: 5px solid #DDD;

    border-radius: 110px;
      -webkit-border-radius: 110px; 
      -moz-border-radius: 110px;
    -khtml-border-radius: 110px;

    box-shadow: 0 7px 10px #CCC;
     -moz-box-shadow: 0 7px 10px #CCC;
     -webkit-box-shadow: 0 7px 10px #CCC;

    background-color: rgb(204,204,204); /* Needed for IEs */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

Answer 2

跨浏览器border-radius

     /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -webkit-border-radius: 100px; 

     /* Firefox 1-3.6 */
     -moz-border-radius: 100px; 

     /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
     border-radius: 100px; 

跨浏览器框阴影

    background-color: rgb(204,204,204); /* Needed for IEs */

    -moz-box-shadow: 0 7px 10px #CCC;
    -webkit-box-shadow: 0 7px 10px #CCC;
    box-shadow: 0 7px 10px #CCC;

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;

您更改的css的最终结果（如果您也想要IE，也包括过滤器）

img {
    width: 200px;
    height: 200px;
    border: 5px solid #DDD;
    border-radius: 100px;
      -webkit-border-radius: 100px; 
      -moz-border-radius: 100px;
    box-shadow: 0 7px 10px #CCC;
     -moz-box-shadow: 0 7px 10px #CCC;
     -webkit-box-shadow: 0 7px 10px #CCC;
}

Answer 3

img {
border-radius: 100px;
  -webkit-border-radius: 100px; 
  -moz-border-radius: 100px;
-khtml-border-radius: 100px;

}