Maison > Article > interface Web > Comment définir la bordure sur des coins arrondis en CSS
Comment définir la bordure sur des coins arrondis en CSS
- 青灯夜游original
- 2021-09-14 16:21:3314646parcourir
En CSS, vous pouvez utiliser l'attribut border-radius pour définir la bordure sur des coins arrondis. Il vous suffit d'ajouter le style "border-radius:radius value;" à l'élément border pour définir les rayons des quatre coins arrondis. en même temps. Les quatre coins sont arrondis.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Le moyen le plus courant et le plus simple de définir des bordures arrondies en CSS consiste à utiliser l'attribut border-radius.
Les coins arrondis CSS ne doivent définir qu'une seule propriété : border-radius (qui signifie "rayon de bordure"). Vous fournissez une valeur pour cette propriété afin de définir les rayons des quatre coins en même temps. Toutes les mesures CSS légales peuvent être utilisées : em, ex, pt, px, pourcentage, etc.
border-radius peut définir 1 à 4 valeurs en même temps :
Si vous définissez 1 valeur, cela signifie que les 4 congés utilisent cette valeur.
<!DOCTYPE html>
<html>
<head>
<style>
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>Rendu :
Si deux valeurs sont définies, cela signifie que le coin supérieur gauche et le coin inférieur droit utilisent la première valeur, et le coin supérieur droit et le coin inférieur gauche utilisent la seconde valeur.
Si trois valeurs sont définies, cela signifie que le coin supérieur gauche utilise la première valeur, le coin supérieur droit et le coin inférieur gauche utilisent la deuxième valeur et le coin inférieur droit utilise la troisième valeur.
Si quatre valeurs sont définies, elles correspondent au coin supérieur gauche, au coin supérieur droit, au coin inférieur droit et au coin inférieur gauche (dans l'ordre des aiguilles d'une montre).
border-radius peut également définir le deuxième ensemble de valeurs avec des barres obliques. Le premier ensemble de valeurs représente le rayon horizontal et le deuxième ensemble de valeurs représente le rayon vertical. Le deuxième ensemble de valeurs peut également définir 1 à 4 valeurs en même temps, et les règles d'application sont les mêmes que celles du premier ensemble de valeurs.
Recommandations associées : "Tutoriel vidéo CSS"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!