Il miglior tutorial CSS3 angoli arrotondati Nel 2024, in questo tutorial puoi imparare CSS3 angoli arrotondati,Supporto per il browser,CSS3 proprietà border-radius,Esempi,CSS3 border-radius - specificare ogni filetto,Esempi,Esempi,CSS3 angoli arrotondati proprietà,
Utilizzare CSS3 proprietà border-radius, è possibile effettuare qualsiasi elemento di "corner".
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione di proprietà.
-webkit- o figure precedenti -moz- espresso sostegno per la prima versione del prefisso.
属性 | |||||
---|---|---|---|---|---|
border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Utilizzare CSS3 proprietà border-radius, è possibile effettuare qualsiasi elemento di "corner".
I seguenti tre esempi:
1. Specificare il colore dell'elemento arrotondato sfondo:
Filetto!
2. Specificare l'elemento di confine filetto:
Filetto!
3. Specificare il elementi di immagine di sfondo Filetto:
Filetto!
Il codice è il seguente:
Se si specifica un solo valore nella proprietà border-radius, allora genererà quattro filetti.
Ma se si desidera specificare undici ai quattro angoli, è possibile utilizzare le seguenti regole:
I seguenti tre esempi:
1. I quattro valori - border-radius: 15px 50px 30px 5px:
2. I tre valori - border-radius: 15px 50px 30px:
3. I due valori - border-radius: 15px 50px:
Quanto segue è il codice sorgente:
È inoltre possibile creare un angolo ellittica:
proprietà | descrizione |
---|---|
border-radius | Tutti e quattro gli angoli del confine - * - * - proprietà raggio Acronimo |
border-top-left-radius | Esso definisce l'angolo superiore sinistro dell'arco |
border-top-right-radius | Definisce l'angolo in alto a destra di Radian |
border-bottom-right-radius | Definisce l'arco in basso a destra |
border-bottom-left-radius | Definisce l'angolo in basso a sinistra dell'arco |