Latest web development tutorials

CSS3 coins arrondis

CSS3 coins arrondis

Utilisez CSS3 propriété border-radius, vous pouvez faire tout élément «coin».

CSS3 Maker arrondie

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

-webkit- ou figures précédentes -moz- exprimé leur soutien à la première version du préfixe.

属性
border-radius 9.0 5.0
4.0 -webkit-		 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5

CSS3 propriété border-radius

Utilisez CSS3 propriété border-radius, vous pouvez faire tout élément «coin».

Les trois exemples suivants:

1. Spécifiez la couleur de l'élément arrondi de fond:

Fillet!

2. Spécifiez l'élément de bordure de filet:

Fillet!

3. Indiquez les éléments d'image de fond de filet:

Fillet!

Le code se présente comme suit:

Exemples

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

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

# Rcorners3 {
border-radius: 25px;
background: url (paper.gif);
background-position: gauche en haut;
background-repeat: repeat;
padding: 20px;
largeur: 200px;
hauteur: 150px;
}

Essayez »

CSS3 border-radius - spécifier chaque filet

Si vous spécifiez une seule valeur dans la propriété border-radius, il va générer quatre filets.

Mais si vous voulez spécifier onze aux quatre coins, vous pouvez utiliser les règles suivantes:

  • Quatre valeurs: le coin supérieur gauche de la première valeur et la seconde valeur est le coin supérieur droit, le coin inférieur droit est le troisième, et le quatrième est le coin inférieur gauche.
  • Trois valeurs: le coin supérieur gauche de la première valeur et la seconde valeur est en haut à droite et en bas à gauche, en bas à droite de la troisième valeur
  • Deux valeurs: la première est en haut à gauche et en bas à droite, et le second est le coin supérieur droit et le coin inférieur gauche
  • Une valeur: la même valeur arrondie quatre

Les trois exemples suivants:

1. Les quatre valeurs - border-radius: 15px 50px 30px 5px:

2. Les trois valeurs - border-radius: 15px 50px 30px:

3. Les deux valeurs - border-radius: 15px 50px:

Ce qui suit est le code source:

Exemples

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

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

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

Essayez »

Vous pouvez également créer un coin elliptique:

Exemples

#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;
}

Essayez »

CSS3 arrondi propriété coins

propriété description
border-radius Les quatre coins de la frontière - * - * - propriétés de rayon Acronyme
border-top-left-radius Il définit le coin supérieur gauche de l'arc
border-top-right-radius Il définit le coin supérieur droit de radian
border-bottom-right-radius Il définit l'arc du coin inférieur droit
border-bottom-left-radius Il définit le coin inférieur gauche de l'arc