使用css将图像显示为带圆圈的图像答案

【问题标题】：Image to be displayed as a circled Image using css使用css将图像显示为带圆圈的图像
【发布时间】：2011-12-06 16:01:47
【问题描述】：

这是我的代码 - 这适用于 chrome、firefox 和 safari .. 我已经在 Windows 7 上对其进行了测试但是在 IE 8 和 Opera 浏览器中，以下代码不起作用，我没有显示带圆圈的图像，而是以方形形式获取图像

CSS

#hotspot-img1-0{
top: 570px; 
left: 67px; 
height: 104px; 
width: 104px; 
border-top-left-radius: 52px; 
border-top-right-radius: 52px; 
border-bottom-right-radius: 52px; 
border-bottom-left-radius: 52px; 
box-shadow: 0px 2px 5px 0px; 
border-top-color: rgb(255, 255, 255); 
border-left-color: rgb(255, 255, 255); 
border-right-color: rgb(255, 255, 255); 
border-bottom-color: rgb(255, 255, 255); 
border-top-width: 2px; 
border-left-width: 2px; 
border-right-width: 2px; 
border-bottom-width: 2px; 
border-top-style: solid; 
border-left-style: solid; 
border-right-style: solid; 
border-bottom-style: solid
}

【问题讨论】：

对于 IE 可能是因为它不支持此类 css 属性，请尝试是否有任何可用的 hack (IE) 用于边框半径。
尝试破解它htmlremix.com/css/curved-corner-border-radius-cross-browser
或者只是制作一个透明的圆形 png，它仍然是一个正方形，看起来就像一个圆形

标签： html css

【解决方案1】：

@桑德赫斯特;第一件事不好的标记是这样写的：

<div>
  <ul>
    <li>
       <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
    </li>
  </ul>
</div>

& 使用background-image 代替img 回答问题：

li{
 background:url(image.jpg) no-repeat;
 -moz-border-radius:52px;
 -webkit-border-radius:52px;
 border-radius:52px;
width:200px;
height:200px;
}

【讨论】：

这可行，但图像不适合圆圈内，而是只有一部分显示在圆圈内
为适合div内的图像写入-moz-background-size:100% 100%; -webkit-background-size:100% 100%;

【解决方案2】：

Internet Explorer 8 及更低版本中的border-radius CSS3 declaration is unsupported。您可以使用 -o-border-radius 声明在 Opera 中获得圆角边框。

CSS3 Pie 可能有助于在旧版本的 Internet Explorer 中获得圆形边框，但我建议将它们保留为方形图像（遵循 graceful degradation and progressive enhancement 的原则）。

【讨论】：

【解决方案3】：

这是一个 CSS3 问题。 IE 和 Opera 处理不好。如果您愿意，可以使用http://fetchak.com/ie-css3/ 之类的解决方案来解决它。

祝你好运！

【讨论】：

【解决方案4】：

目前 Opera（10.5 版以上）、Safari（5 版以上）和 Chrome（5 版以上）都支持当前 W3C 规范中原生定义的单独的border-*-radius 属性和border-radius 简写属性（尽管在边框样式转换、使用长度百分比等问题上仍然存在突出的错误）。 Mozilla Firefox（1.0 版以后）支持带有 -moz- 前缀的边界半径，尽管 Mozilla 实现与当前的 W3C 规范之间存在一些差异（见下文）。更新：最近的 Firefox nightly 版本支持不带 -moz- 前缀的边界半径。 Safari 和 Chrome（以及其他基于 webkit 的浏览器）从版本 3 开始支持带有 -webkit- 前缀的边界半径（从版本 5 开始不再需要），尽管与当前规范再次存在一些差异（有关详细信息，请参阅本文旧版本的 Webkit 如何处理边界半径）。甚至微软也承诺并在他们最近的预览版中展示了从 Internet Explorer 9 开始支持边界半径（不带前缀）。

http://www.css3.info/preview/rounded-border/

【讨论】：

【解决方案5】：

这是一个网站http://www.danielmall.com/，其中图像以圆形显示。该网站的作者使用 jquery 和 css 使其与 IE 和 firefox 一起工作。查看页面源代码，您将获得有关如何使用它的一些有趣信息。

【讨论】：

【解决方案6】：

图像地图可以为您做到。

Clicking content below image with higher z-index

http://jsfiddle.net/u9cYZ/

http://jsfiddle.net/u9cYZ/3/

【讨论】：

【解决方案7】：

据我所知，没有办法让 Opera 或 IE 使用 CSS 将<img> 剪辑成一个圆圈。不过，border-radius 会裁剪元素样式中设置的背景图像。

您也许可以clip things using SVG，但我无法让该页面上的任何示例在 Opera 中工作。

【讨论】：

另外，如果您在图像上使用border-radius，Opera 12 alpha 会将图像剪裁成圆形，因此这将适用于下一个版本的Opera。只需在图像上使用不带前缀的边框半径即可。