Border che non appare continuo

Sto cercando di fare un arco usando border-radius come questo (in cromo)Border che non appare continuo

#elem { 
    border: 2px solid orange; 
    border-bottom: none; 

    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
}

ma l'arco non è continua. se rimuovo la proprietà border-bottom (che rende visibile anche il bordo inferiore) è diventato continuo. Anche rendere trasparente il colore del bordo inferiore non aiuta.

ad es. http://jsfiddle.net/kFxec/9/

Non è possibile capire cosa c'è che non va qui?

Sto provando questo solo per chrome. funziona bene in Firefox

fonte

2013-07-03 Yogesh Khatri

Sembra che abbia qualcosa a che fare con la tua altezza. Se ho raggiunto l'altezza a 90 px, va bene. La tua scatola deve essere alta solo 60px? –

o puoi imbrogliare in questo modo http://jsfiddle.net/kFxec/6/ :) – Pavel

funziona anche per piccole larghezze ma in realtà nel mio caso, la larghezza/altezza non è statica e sto assegnando il raggio del bordo in modo dinamico secondo alla larghezza e all'altezza. come il raggio orizzontale il 50% della larghezza e il raggio verticale è del 100% di altezza. ha aggiornato la domanda con il valore corretto per la larghezza. –

direi che si tratta di una sorta di bug. Sembra correlato al bordo inferiore. Scompare con questo CSS

#elem { 
    border: 2px solid orange; 
    border-bottom: none; 

    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
}

Quello che si vede il taglio del bordo superiore sembra che il bordo inferiore a fare cose strane in giro. Ma dargli un raggio moderato sembra in qualche modo farlo comportare. (Non so perché)

fiddle

fonte

2013-07-03 16:17:56 vals

ottimo .. funziona per me –

si potrebbe confine invece finto con box-shadow: http://jsfiddle.net/ZC2m2/

#elem { 
    box-shadow:0 -2px 0 orange; 
    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
}

fonte

2013-07-03 15:07:21

questa soluzione è fantastica ma sfortunatamente nel nostro prodotto stiamo usando lo stile del bordo punteggiato. l'avevo scritto per es. per scoprire cosa c'è che non va. potrebbe essere un bug del browser di quanto dovrei andare con la tua soluzione. –

Border che non appare continuo

risposta

Problemi correlati