Imagen que se mostrará como un círculo Imagen usando css

Aquí está mi código - Esto funciona en Chrome, Firefox y Safari .. Lo he probado en Windows 7 Sin embargo, en IE 8 y navegador Opera el siguiente código no funciona y en su lugar de mostrar una imagen de un círculo que estoy recibiendo de imagen en forma cuadradaImagen que se mostrará como un círculo Imagen usando css

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

Fuente

2011-10-13 Sandhurst

para IE que podría ser debido a que no está apoyando este tipo de propiedades CSS, probar si cualquier truco disponible (IE) para el radio de frontera. – punit

intente y hackelo http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser – rmagnum2002

o simplemente haga un círculo png con transparencia, seguirá siendo un cuadrado, se verá como un círculo –

@Sandhurst; Lo primero que mal marcado escribir así:

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

& respuesta a la pregunta usar background-image en lugar de img:

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

Fuente

2011-10-13 05:08:03 sandeep

Claro, me ocuparé del marcado la próxima vez – Sandhurst

Esto funciona pero la imagen no está dentro del círculo, en su lugar solo se muestra una parte dentro del círculo – Sandhurst

para ajustar la imagen dentro del div escribir -moz-background- tamaño: 100% 100%; -webkit-background-size: 100% 100%; – sandeep

es una cuestión de CSS3. IE y Opera no lo manejan bien. Puede usar una solución como http://fetchak.com/ie-css3/ para resolverla si lo desea.

¡Buena suerte!

Fuente

2011-10-13 04:57:55

En la actualidad, Opera (versión 10.5 en adelante), Safari (versión 5 en adelante) y Chrome (versión 5 en adelante) admiten las propiedades de borde individual - radio y la propiedad de taquigrafía según se define originalmente en el W3C actual Especificación (aunque todavía hay errores pendientes en problemas tales como las transiciones de estilo de borde, el uso de porcentajes de longitudes, etc.). Mozilla Firefox (versión 1.0 en adelante) admite border-radius con el prefijo -moz-, aunque existen algunas discrepancias entre la implementación de Mozilla y la especificación W3C actual (consulte a continuación). Actualización: las versiones nocturnas de Firefox recientes admiten border-radius sin el prefijo -moz-. Safari y Chrome (y otros navegadores basados en webkit) han admitido radio de borde con el prefijo -webkit desde la versión 3 (ya no es necesario desde la versión 5 en adelante), aunque nuevamente con algunas discrepancias de la especificación actual (consulte este artículo para más información detalles de cómo las versiones anteriores de Webkit manejan border-radius). Incluso Microsoft ha prometido, y lo ha demostrado en su reciente versión preliminar, soporte para border-radius desde Internet Explorer 9 en adelante (sin prefijo).

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

Fuente

2011-10-13 04:58:15 rmagnum2002

El border-radius CSS3 declaration is unsupported en Internet Explorer 8 y por debajo. Puede usar la declaración -o-border-radius para obtener bordes redondeados en Opera.

CSS3 Pie pueden ayudar a obtener bordes redondeados en las versiones anteriores de Internet Explorer, pero yo recomendaría simplemente dejarlas como imágenes cuadradas (siguiendo los principios de graceful degradation and progressive enhancement).

Fuente

2011-10-13 05:03:19

Aquí hay un sitio web http://www.danielmall.com/ donde las imágenes se muestran en círculo. El autor del sitio web ha utilizado jquery y css para que funcione tanto con IE como con Firefox. Consulte la fuente de la página y obtendrá información interesante sobre cómo usarla.

Fuente

2011-10-13 05:05:19 Prashant

-1

Que yo sepa, no hay manera de conseguir Opera o Internet Explorer para el clip de un <img> a un círculo usando CSS. border-radius recortará imágenes de fondo establecidas en estilos de elemento.

Es posible que pueda clip things using SVG, pero no pude obtener ninguno de los ejemplos en esa página para trabajar en Opera.

Fuente

2011-10-13 05:08:26

Además, si utiliza el radio del borde en la imagen, Opera 12 alpha recorta la imagen en un círculo, por lo que esto funcionará con la próxima versión de Opera. Simplemente use el radio de borde no prefijado en la imagen también. –

Los mapas de imagen lo pueden hacer por usted.

Clicking content below image with higher z-index

http://jsfiddle.net/u9cYZ/

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

Fuente

2011-10-13 06:33:55 Joonas

Imagen que se mostrará como un círculo Imagen usando css

Respuesta

Cuestiones relacionadas