Safari 中的 CSS 边框半径 + 框阴影答案

【问题标题】：CSS border-radius + box-shadow in SafariSafari 中的 CSS 边框半径 + 框阴影
【发布时间】：2014-04-16 19:15:55
【问题描述】：

我创建了一个 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）：

【问题讨论】：

标签： safari css

【解决方案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;
}

【讨论】：

【解决方案2】：

跨浏览器边界半径

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

【讨论】：

我尝试了跨浏览器变体，但没有任何变化。与之前在 Safari 中的结果相同 :(

【解决方案3】：

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

}

【讨论】：

您似乎复制并粘贴了 CoalaArmy 答案的一部分，即使是倾斜的格式也与之匹配。不是很有帮助。
复制这个答案时我能说什么，已经尝试过这个和包含你的答案的 Gaurav 答案，并且 CoalaArmy 的答案已经被接受。