CSS esquinas redondeadas

Estoy intentando hacer lo siguiente ...CSS esquinas redondeadas

Esto es lo que tengo ahora ... pero no se está procesando correctamente. ¿Alguien tiene alguna idea de cómo arreglaría esto?

CSS

/* Curved Corners */ 
    .bl { 
background: url(bl.gif) 0 100% no-repeat; 
/*background-color:#EFFBEF;*/ 
width: 700px; 
margin-left: auto ; 
margin-right: auto ;} 
    .br { 
background: url(br.gif) 100% 100% no-repeat; 
} 
    .tl { 
background: url(tl.gif) 0 0 no-repeat; 
} 
    .tr { 
background: url(tr.gif) 100% 0 no-repeat; 
} 
    .clear {font-size: 1px; height: 1px}

HTML

<div class="bl"><div class="br"><div class="tl"><div class="tr"> 

     <div id="header"> 

    </div> 

    <div id="footer"> 

    </div> 

     </div></div></div></div>

Fuente

2010-12-31 Skizit

lugar le sugiero que utilice CSS 3, que a diferencia de otros métodos, no requiere HTML ajena o por marcadores Javascript que notoriamente causa ningún elemento redondeado para 'parpadear' al cargar la página.

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px;

Este generador también es útil: http://borderradius.com/ y hay otro en http://css3generator.com

En las versiones más recientes de la mayoría (si no todos) los navegadores border-radius: 10px; funciona muy bien, y con la debida antelación, el navegador específica las declaraciones serán obsoletas.

para hacer funcionar el radio frontera en IE6, 7 y 8, tratar ms-border-radius js library, aunque no lo he probado (y alguien ha respondido que no funciona.) Mi opinión personal es que aún si alguien es el uso de estos navegadores, Internet debe parecerles un lugar extraño y atemorizante en el día a día, y por lo tanto, no perderán sus esquinas redondeadas.

Aparte: El método que está tratando de usar era más aplicable cuando CSS3 no era tan ampliamente compatible. Fue creado durante un extraño período de Internet cuando la popularidad de IE6 llevó a innumerables desarrolladores web a encontrar soluciones creativas no semánticas para problemas simples. Así que gracias a Internet Explorer por tomarse unos años de nuestras vidas y ralentizar la progresión del diseño y desarrollo web.

Fuente

2010-12-31 02:33:26 Sandwich

Tenía la impresión de que IE8 no es compatible con esto. – Skizit

Esto es cierto, pero lo siguiente resuelve bien ese problema (en IE6, 7 y 8) información: http://code.google.com/p/ms-border-radius/wiki/Usage y fuente: http://code.google.com/p/ms-border-radius/source/checkout – Sandwich

msbr se ve roto, arroja una excepción en IE8 tan pronto como se carga la secuencia de comandos.Parece que funciona a pesar de eso, pero no me gusta ver errores en la barra de estado. –

Un resumen fantástico para todos los navegadores, que le dice cómo redondear las esquinas o todos los rincones:

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Fuente

2010-12-31 02:34:10 Ben

Siempre hay curvycorners así, utiliza CSS nativa para la velocidad si el navegador lo soporta o vuelve a javascript si el navegador no lo hace.

Fuente

2010-12-31 02:37:19

se puede hacer fácilmente con jQuery esquinas redondeadas rounded_corner

$(document).ready(function(){ 
    $("#b1").corner(); 
});

Usted no necesita preocuparse por problemas con el navegador cruzadas con enfoque de jQuery.

Fuente

2010-12-31 03:39:40

En su lugar, simplemente coloque este código en la clase en la que desea tener esquinas redondeadas. Sin duda, funcionará.

-khtml-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px;

Fuente

2013-02-20 06:50:47 vikram

Respuesta

Cuestiones relacionadas