Bordi curvi cross-browser

Question

Qual è il modo migliore per ottenere angoli curvi cross-browser (ff, cioè> 6, cromo, opera, safari) su un div. Ho trovato questo articolo http://jonraasch.com/blog/css-rounded-corners-in-all-browsers e ho seguito le istruzioni passo dopo passo più volte, qui è il mio 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]--> 

Qualcuno mi può indicare quello che sto facendo di sbagliato o c'è un modo migliore per ottenere lo stesso effetto, il suo funzionamento in tutti i browser tranne IE

Answer 1

Se si tratta di uno snippet non modificato dal file HTML, è chiaro il motivo per cui non funziona: stai utilizzando un tag <style> all'interno di un altro <style>.

Come prima prova, basta provare a sostituire l'intero frammento con (togliere il blocco specifico 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; 
} 

Se funziona, è possibile spostare le parti specifiche di IE in una separata <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]--> 

Se avete ancora problemi, provare il file di esempio zip dal sito web di Google: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Answer 2

Scarica il file .htc:

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

e metterlo all'interno della cartella ./template/css. Vedi il progetto http://code.google.com/p/curved-corner/ per i dettagli (come linkato dall'articolo che hai inserito).

Answer 3

Una citazione dal yo articolo u menzionato:

Il percorso per border-radius.htc funziona in modo diverso di quanto si potrebbe aspettare, a differenza percorsi background-image, che sono relative al foglio di stile, questo percorso è relativo alla pagina da cui si chiama il CSS.

Ecco perché è una buona idea evitare percorsi relativi come abbiamo fatto sopra.

Answer 4

Si potrebbe mettere JQuery Curvy Corners da utilizzare per fare tutto fuori dalla scatola, invece.

Answer 5

ciao ho intenzione di essere solo pigro e incollare un collegamento a qualcuno il lavoro elses .... Non voglio la bontà

provare questo. http://dillerdesign.com/experiment/DD_roundies/

Answer 6

Ecco il css:

.curved { 

-moz-border-radius:10px; 

-webkit-border-radius:10px; 

behavior:url(border-radius.htc); 

} 

Ed ecco come si utilizza, naturalmente:

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

Answer 7

Se interessati a ottenere angoli arrotondati in IE, questo può essere di utilizzo - http://css3pie.com/