CSS3 angoli arrotondati

Utilizzare CSS3 proprietà border-radius, è possibile effettuare qualsiasi elemento di "corner".

Supporto per il browser

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

CSS3 proprietà border-radius

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:

Esempi

# Rcorners1 {
border-radius: 25px;
background: # 8AC007;
padding: 20px;
width: 200px;
altezza: 150px;
}

# Rcorners2 {
border-radius: 25px;
border: 2px solid # 8AC007;
padding: 20px;
width: 200px;
altezza: 150px;
}

# Rcorners3 {
border-radius: 25px;
fondo: url (paper.gif);
background-position: a sinistra sopra;
background-repeat: repeat;
padding: 20px;
width: 200px;
altezza: 150px;
}

Prova »

CSS3 border-radius - specificare ogni filetto

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:

Quattro valori: alto a sinistra del primo valore e il secondo valore è l'angolo in alto a destra, in basso a destra è il terzo e il quarto è l'angolo in basso a sinistra.
Tre valori: alto a sinistra del primo valore e il secondo valore è alto a destra e in basso a sinistra, in basso a destra del terzo valore
Due valori: il primo è il alto a sinistra e in basso a destra, e il secondo è l'angolo in alto a destra e in basso a sinistra
Un valore: lo stesso quattro valore arrotondato

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:

Esempi

# Rcorners4 {
border-radius: 15px 50px 30px 5px ;
background: # 8AC007;
padding: 20px;
width: 200px;
altezza: 150px;
}

# Rcorners5 {
border-radius: 15px 50px 30px;
background: # 8AC007;
padding: 20px;
width: 200px;
altezza: 150px;
}

# Rcorners6 {
border-radius: 15px 50px;
background: # 8AC007;
padding: 20px;
width: 200px;
altezza: 150px;
}

Prova »

È inoltre possibile creare un angolo ellittica:

Esempi

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Prova »