navegador Cruz bordes curvos

Question

¿Cuál es la mejor manera de lograr entre navegadores (FF, es decir,> 6, Chrome, Opera, Safari) esquinas curvas en un div. He encontrado este artículo http://jonraasch.com/blog/css-rounded-corners-in-all-browsers y yo he seguido las instrucciones paso a paso varias veces, aquí está mi css:

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 

<!--[if lte IE 8]> 
<style> 
#content_wrapper{ 
behavior: url(template/css/border-radius.htc); 
border-radius: 20px; 
} 
</style> 
<![endif]--> 

Puede alguien que me señale lo que estoy haciendo mal o hay una mejor manera de lograr el mismo efecto, su trabajo en todos los navegadores excepto en IE

Answer 1

Si se trata de un fragmento no modificado de su archivo HTML, está claro por qué no funciona: está utilizando una etiqueta <style> dentro de otra <style>.

Como primera prueba, sólo trata de la sustitución de todo el fragmento con (quitar el bloqueo específico de IE!):

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 

Si funciona, puede mover las partes específicas de IE en una separada <style>:

<style type="text/css"> 
#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 
</style> 


<!--[if lte IE 8]> 
<style type="text/css"> 
#content_wrapper{ 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 20px; 
} 
</style> 
<![endif]--> 

Si todavía tiene problemas, intente el ejemplo de archivo zip del sitio web de Google: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Answer 2

Descargar el archivo .htc:

• http://curved-corner.googlecode.com/files/border-radius.htc

y poner eso dentro de la carpeta ./template/css. Consulte el proyecto http://code.google.com/p/curved-corner/ para obtener detalles (como se vincula desde el artículo que ha colocado).

Answer 3

Una cita del artículo de años u mencionado:

El camino a border-radius.htc funciona de manera diferente de lo que puede esperar a diferencia de trayectorias Imagen de fondo que son relativas a la hoja de estilo, esta ruta es relativa a la página desde la que se llama a la CSS.

Es por eso que es una buena idea para evitar las rutas relativas como lo hicimos anteriormente.

Answer 4

Se puede poner JQuery Curvy Corners a utilizar para hacerlo todo fuera de la caja en su lugar.

Answer 5

hola voy a simplemente ser perezoso y pegar un enlace a alguien vigilara el trabajo .... No quiero la recompensa

prueba este. http://dillerdesign.com/experiment/DD_roundies/

Answer 6

Aquí es el css:

.curved { 

-moz-border-radius:10px; 

-webkit-border-radius:10px; 

behavior:url(border-radius.htc); 

} 

Y aquí es cómo se utiliza, por supuesto:

<div class="curved">Curvd div</div> 

Answer 7

Si usted interesado en conseguir esquinas redondeadas en el IE, esto puede ser de usar - http://css3pie.com/