Image to be displayed as a circled Image using css

Here's my code - This works in chrome, firefox and safari .. I have tested it on Windows 7 However in IE 8 and Opera browser the following code is not working and instead of showing a circled image I am getting Image in square form

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

---

@Sandhurst; first thing bad markup write like this:

<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>

& Answer for the question use background-image instead of img :

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

---

The border-radius CSS3 declaration is unsupported in Internet Explorer 8 and below. You can use the -o-border-radius declaration to get rounded borders in Opera.

CSS3 Pie may help with getting rounded borders in older versions of Internet Explorer, but I'd recommend just leaving them as square images (following the principles of graceful degradation and progressive enhancement).

---

It's a CSS3 issue. IE and Opera don't handle it well. You can use a solution like http://fetchak.com/ie-css3/ to resolve it if you would like.

Good luck!

链接地址: http://www.djcxy.com/p/89156.html

上一篇: 无标签单选按钮式样

下一篇: 使用css将图像显示为圆圈图像