这是我的代码 - 这适用于chrome,firefox和safari ..我在Windows 7上测试过它但是在IE 8和Opera浏览器中,下面的代码不起作用而不是显示带圆圈的图像我得到的是方形图像
<div id="hotspot-img1-0">
<ul>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;">
</ul>
</div>
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
}
7 回答
@Sandhurst;坏标记写的第一件事就像这样:
问题的答案使用
background-image
而不是img
:Internet Explorer 8及更低版本中的border-radius CSS3 declaration is unsupported . 您可以使用
-o-border-radius
声明在Opera中获得圆角边框 .CSS3 Pie可能有助于在旧版本的Internet Explorer中获得圆形边框,但我建议将它们保留为方形图像(遵循graceful degradation and progressive enhancement的原则) .
它很好地处理它 . 如果您愿意,可以使用像http://fetchak.com/ie-css3/这样的解决方案来解决它 .
祝好运!
目前Opera(版本10.5以后),Safari(版本5以后)和Chrome(版本5以后)都支持单独的边界 - * - radius属性和border-radius速手属性,如当前W3C规范中本地定义的那样(尽管那里在边界样式转换,使用长度百分比等问题上仍然是一些突出的错误 . Mozilla Firefox(版本1.0以后)支持带-moz-前缀的border-radius,尽管Mozilla实现与当前W3C规范之间存在一些差异(见下文) . 更新:最近的Firefox nightly版本支持border-radius而不使用-moz-前缀 . Safari和Chrome(以及其他基于webkit的浏览器)从版本3开始支持带有-webkit-前缀的border-radius(从版本5开始不再需要),尽管与当前规范有一些差异(有关详细信息,请参阅此文章) Webkit的旧版本如何处理border-radius) . 甚至微软也承诺并在最近的预览版中展示了从Internet Explorer 9开始支持border-radius(没有前缀) .
http://www.css3.info/preview/rounded-border/
这是一个网站http://www.danielmall.com/,其中图像以圆圈显示 . 该网站的作者使用jquery和css来使其与IE和Firefox一起使用 . 查看页面源代码,您将获得有关如何使用它的一些有趣信息 .
图像映射可以为您完成 .
Clicking content below image with higher z-index
http://jsfiddle.net/u9cYZ/
http://jsfiddle.net/u9cYZ/3/
据我所知,没有办法让Opera或IE使用CSS将
<img>
剪辑成圆圈 . border-radius将剪切以元素样式设置的背景图像 .您可能能够clip things using SVG,但我无法让该页面上的任何示例在Opera中运行 .