Maison > Article > interface Web > Comment écrire une bordure CSS sur une bordure arrondie
Comment écrire une bordure CSS sur une bordure arrondie
- WBOYoriginal
- 2021-11-12 11:44:568293parcourir
Écriture : 1. Ajoutez le style "border-radius: arrondi coin value;" à la bordure pour définir uniformément la taille du coin arrondi; 2. Ajoutez "border-top-left-radius: arrondi coin valeur;", "border- top-right" -radius: fillet value;" et d'autres styles définissent respectivement la taille du congé aux quatre coins.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment écrire une bordure CSS sur une bordure arrondie
Utilisation de base de la bordure arrondie (border-radius) : L'attribut border-radius est un attribut abrégé utilisé pour définir les attributs de quatre coins arrondis.
L'utilisation la plus basique d'une bordure arrondie est de définir quatre coins arrondis du même arc
border-top-left-radius：30px； //左上角 border-top-right-radius：30px； //右上角 border-bottom-left-radius：30px； //右下角 border-bottom-right-radius：30px； //左下角
Si les coins arrondis de ces quatre radians sont identiques, cela peut s'écrire :
border-radius：30px；
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="div1">圆角边框</div>
</body>
</html>Sortie résultat :
Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéos de programmation ! !
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!