Webkit arrotondamento volte abbia effetto

Question

Questo problema è sulla proprietà border-radius CSS3 ( http: // www.css3.info/border-radius-apple-vs-mozilla/ )

Un esempio di questo problema è qui:

http://jamtodaycdn.appspot.com/bin/rounded.html

In questo URL, ho arrotondato div che sembrano essere arrotondato in FF3, ma su Safari e Chrome gli angoli arrotondati non ci sono.

Lo stile è la seguente:

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

Sono abbastanza sicuro che questo CSS è formattata correttamente, quindi sono all'oscuro di quale sia il problema.

Answer 1

Il problema sembra essere nel radia 92px. Sembra che il raggio massimo che il 20-pixel-alta div in grado di gestire è 18px. Non è necessariamente ovvio quale un raggio 92 pixel significa in questo caso. Tuttavia, è possibile specificare sia una X e Y il raggio utilizzando qualcosa di simile a questo:

-webkit-border-bottom-right-radius: 92px 18px;

(nota a margine, non si deve utilizzare lo stesso ID per più elementi HTML. Si consiglia di utilizzare classe, invece, e regolare il selettore CSS così si dice .round invece di #round.)

Answer 2

Per chiunque riferimento a questo per un aiuto con gli angoli arrotondati, sono d'accordo con la risposta di Jacob riguardo Webkit, ma la questione anche detto Chrome non funziona. Chrome utilizza lo standard CSS3 angoli che sono esattamente come Webkit di arrotondata, ma senza la precedente '-webkit-' sulla regola. Questi sono i seguenti:

border-bottom-right-radius:2px;

Per tener conto Firefox, Webkit e Chrome, avresti bisogno di fare qualcosa di simile:

-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

La terza serie di regole sono regole CSS3 e sono supportati da Chrome. Questo è un buon modo per ottenere anche gli angoli arrotondati in IE usando qualcosa come CSS3Pie: http://css3pie.com/

Answer 3

Non è necessario applicare una proprietà bordo o border-width, così come le varie proprietà border-radius?

Inoltre, ho notato Safari far cadere il raggio di sopra di determinati valori di raggio -. Prova a ridurre i valori dei pixel e vedere cosa succede

Answer 4

tipo semplice basta usare:

border-radius:92px 92px 2px 2px;

dove:

border-radius:top right bottom left;