Fondamentalmente sto cercando di capire come lo faccio angoli arrotondati su un DIV in CSS che renderà in Google Chromecome faccio angoli arrotondati in CSS in Google Chrome
risposta
Google Chrome (e Safari) lavorare con il seguenti CSS 3 prefissi
-webkit-border-radius: 10px;
per tutti gli angoli a 10px
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
per in alto a sinistra e in basso a sinistra alla 8px
Per Firefox è possibile utilizzare:
-moz-border-radius: 10px;
per tutti gli angoli e
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
per l'angolo in alto a sinistra e in basso a sinistra
a coprire sia Chrome, FF e qualsiasi browser che supporti CSS 3:
{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
+1 per il futuro a prova di 'border-radius' – peirix
È futuro-utile per codificare il tuo c ss come questo:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
questo modo, quando IE9/IE10 esce il vostro codice sarà anche funzionare anche lì: D
Si, pero 'l'unico problema di questo è che in realtà si sta gettando errori css perché di IE che è in jack e Microshaft non vuole fare nulla al riguardo, la correzione che uso è basata su js ma immagino che la maggior parte della gente ne sappia tutto. Ma, la ragione per cui lo uso è perché funziona sempre per me e su tutti i principali browser. Ecco qui.
var obj= document.getElementById('divName');
var browserName=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
obj.style.MozBorderRadius = "15px";
obj.style.WebkitBorderRadius= "15px";
}
Dato che tutti i browser ora supportano il raggio di confine senza prefissi; vedi: http://caniuse.com/#search=border-radius la sintassi corretta da utilizzare oggi è semplicemente:
border-radius: 5px;
- 1. Angoli arrotondati CSS in IE8
- 2. CSS div angoli arrotondati
- 3. CSS angoli arrotondati div
- 4. Angoli arrotondati solo su alcuni angoli in css
- 5. Angoli arrotondati in un layout di tabella table css?
- 6. angoli arrotondati su immagini
- 7. Chrome non riceve i bordi arrotondati CSS
- 8. Angoli arrotondati su UITableView
- 9. Angoli arrotondati su UIView
- 10. Angoli arrotondati di ToolStrip
- 11. Angoli arrotondati di MKMapView
- 12. UIToolbar con angoli arrotondati
- 13. Tabelle con angoli arrotondati
- 14. Come creare lo sfondo css div/angoli arrotondati?
- 15. FrameLayout con angoli arrotondati
- 16. angoli arrotondati ritaglio
- 17. Angoli arrotondati su un fieldset
- 18. NSImageView angoli arrotondati + corsa
- 19. UITableViewCell: angoli arrotondati e ombreggiatura
- 20. Come creare un'immagine con angoli arrotondati in C#?
- 21. Impostare gli angoli arrotondati per svg: image
- 22. Disegno quadrato con angoli arrotondati
- 23. CSS 3 - angoli arrotondati negli stati after e before
- 24. Fluid angoli arrotondati con jQuery
- 25. Angoli arrotondati UIView o UIImageView
- 26. Imagebutton immagine intera, angoli arrotondati
- 27. Debug di CSS in Google Chrome
- 28. Come creare un div con angoli arrotondati
- 29. imbottitura CardView e angoli arrotondati
- 30. Bug floating CSS in Google Chrome
@Spasm Penso che tu abbia, ma tanto per essere chiari border-radius è la classe CSS 3. il prefisso webkit è specifico per Chrome e altri browser Webkit. – dove
@dove - poiché Spasm non ha menzionato 'border-radius' senza prefissi, vuoi solo farti notare che un giorno ci sarà un browser diverso da Opera che supporta questa regola di stile senza il prefisso? – Anthony
@Anthony: speriamo che i browser Webkit e Mozilla lascino un giorno il prefisso e si convertano al valore predefinito, come previsto. E se hai già il 'border-radius', allora non dovrai entrare e cambiare il tuo codice ... – peirix