Arrotondamento CSS
- Pagina precedente Funzione matematica CSS
- Pagina successiva Immagine di bordo CSS
Arrotondamento CSS
attraverso CSS border-radius
Le proprietà possono implementare lo stile 'angolo arrotondato' di qualsiasi elemento.
Proprietà border-radius CSS
CSS border-radius
L'attributo definisce il raggio degli angoli dell'elemento.
Suggerimento:Puoi utilizzare questo attributo per aggiungere arrotondamenti agli elementi!
Ecco tre esempi:
1. Elementi con colore di sfondo specificato arrotondati:
2. Elementi con bordi arrotondati:
3. Elementi con immagine di sfondo arrotondati:
Ecco il codice:
Esempio
#rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }
Suggerimento:border-radius
L'attributo è una abbreviazione degli attributi seguenti:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
CSS border-radius - specifica ogni angolo
border-radius
L'attributo accetta da uno a quattro valori. Le regole sono le seguenti:
Quattro valori - border-radius: 15px 50px 30px 5px;(Vengono utilizzati rispettivamente: angolo in alto a sinistra, angolo in alto a destra, angolo in basso a destra, angolo in basso a sinistra):
Tre valori - border-radius: 15px 50px 30px;(Il primo valore viene utilizzato per l'angolo in alto a sinistra, il secondo valore viene utilizzato per l'angolo in alto a destra e in basso a sinistra, il terzo per l'angolo in basso a destra):
Due valori - border-radius: 15px 50px;(Il primo valore viene utilizzato per l'angolo in alto a sinistra e in basso a destra, il secondo valore viene utilizzato per l'angolo in alto a destra e in basso a sinistra):
Un valore - border-radius: 15px;(Questo valore viene utilizzato per tutti e quattro gli angoli, i bordi arrotondati sono gli stessi):
Ecco il codice:
Esempio
#rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
Puoi anche creare angoli ellittici:
Esempio
#rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }
Attributo arrotondamento angoli CSS
Attributo | Descrizione |
---|---|
border-radius | Proprietà abbreviate per impostare tutti e quattro gli attributi border-*-*-radius. |
border-top-left-radius | Definire la forma del bordo superiore sinistro. |
border-top-right-radius | Definire la forma del bordo superiore destro. |
border-bottom-right-radius | Definire la forma del bordo inferiore destro. |
border-bottom-left-radius | Definire la forma del bordo inferiore sinistro. |
- Pagina precedente Funzione matematica CSS
- Pagina successiva Immagine di bordo CSS