2009-10-02 9 views

Respuesta

28

Google Chrome (y Safari) trabajar con el CSS 3 siguientes prefijos

-webkit-border-radius: 10px; 

para todas las esquinas en 10px

-webkit-border-top-left-radius: 8px; 
-webkit-border-bottom-left-radius: 8px; 

de la esquina superior izquierda e inferior izquierda en 8 píxeles

Para Firefox que puede utilizar:

-moz-border-radius: 10px; 

para todas las esquinas y

-moz-border-radius-topleft: 8px; 
-moz-border-radius-bottomleft: 8px; 

para la esquina superior izquierda e inferior izquierda

+1

@Spasm i cree que lo tiene, pero sólo para ser claros frontera de radio es la clase CSS 3. El prefijo webkit es específicamente para Chrome y otros navegadores webkit. – dove

+0

@dove - dado que Spasm no mencionó 'border-radius' sin los prefijos, ¿solo quiere señalar que algún día habrá un navegador distinto de Opera que admita esta regla de estilo sin el prefijo? – Anthony

+1

@Anthony: con suerte los navegadores Webkit y Mozilla algún día dejarán caer el prefijo, y simplemente convertirán a los valores predeterminados, como se supone que deben hacerlo. Y si ya tienes 'border-radius' allí, entonces no tendrás que entrar y cambiar tu código ... – peirix

21

Para cubrir tanto Chrome, FF y cualquier navegador que soporte CSS 3:

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} 
+1

+1 para futuras pruebas con 'border-radius' – peirix

4

En el futuro es útil codificar su c ss así:

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

esta manera, cuando IE9/IE10 salga de su repertorio son también trabajar allí también: D

1

Sí, pero el único problema con esto es que en realidad se está lanzando errores css porque de IE siendo jacked y de que Microshaft no quiere hacer nada al respecto, la solución que uso está basada en js, pero me imagino que la mayoría de la gente lo sabe todo. Pero, la razón por la que lo uso es porque siempre funciona para mí y para todos los principales navegadores. Aqui tienes.

var obj= document.getElementById('divName'); 
var browserName=navigator.appName; 
var browserVer=parseInt(navigator.appVersion); 
//alert(browserName); 
if ((browserName=="Microsoft Internet Explorer")) { 
obj.style.borderRadius = "15px"; 
}else { 
    obj.style.MozBorderRadius = "15px"; 
    obj.style.WebkitBorderRadius= "15px"; 

} 
Cuestiones relacionadas