2010-06-07 11 views
25

Ho un problema con gli angoli parzialmente arrotondati. Guarda il primo esempio di lavoro per la maggior parte dei browser:Come ottenere un solo angolo arrotondato con htc hack con raggio di confine e MSIE v: roundrect?

.box { 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    background-color: yellow; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
} 

Si può vedere che solo l'angolo in basso a destra deve essere arrotondato. scelta naturale sarebbe l'aggiunta di un border-radius.htc hack all'interno di un'istruzione condizionale IE:

.box { 
    border-bottom-right-radius: 20px; 
    behavior:url(border-radius.htc); 
} 

Questo non funziona perché il file border-radius.htc è solo accedendo normale valore border-radius (this.currentStyle [ 'border-radius']). VML usato dall'hack è roundrect che supporta solo un valore percentuale per arcsize.

Quindi mi chiedevo se c'è un altro modo per aggirare il problema usando alcuni altri elementi VML?

Un altro problema è che htc-file non supporta i bordi ma può essere corretto con l'attributo tratteggiato di VML. Ad esempio, gli angoli di Nifty non funzionano bene con gli angoli.

risposta

78

sono riuscito a farlo funzionare con border-radius: 0 0 10px 10px; e htc da http://css3pie.com/

+2

grande risposta, probabilmente dovrebbe aver capito che fuori su il mio – Jonesopolis

+2

Per ulteriori informazioni sul raggio di confine: http://css-tricks.com/almanac/properties/b/border-radius/ – wowpatrick

+1

perfetto! non so perché questo non è stato contrassegnato come la vera risposta! –

9

L'altra soluzione: border-bottom-right-radius:10px; non fare Calcola CPU non necessari arrotondamenti confine

Problemi correlati