Lors du processus de création de pages Web, nous pouvons parfois avoir besoin d'obtenir l'effet de coins arrondis. La méthode précédente consistait à découper le brouillon de conception en images pouvant être facilement transformées en pages et à utiliser plusieurs images d'arrière-plan pour obtenir des coins arrondis. Après l'émergence de CSS3, il n'est plus nécessaire d'avoir de tels problèmes. CSS3 fournit une série de propriétés pour définir l'effet de coin arrondi des éléments, comme indiqué ci-dessous :
Les valeurs facultatives des fonctions ci-dessus sont indiquées dans le tableau suivant :
border-radius est utilisé pour implémenter des bordures arrondies.
Exemple:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ corps></html>Résultats en cours d'exécution :
Mais si je règle border-radius sur 150px, cela deviendra une bordure circulaire
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ corps></html>Résultats en cours d'exécution :
Pour plus de commodité, définissez simplement border-radius sur 50 %. L'effet est le même.
Mais si vous voulez dessiner un cercle, la largeur et la hauteur doivent être égales.
En fait, plusieurs valeurs d'attribut peuvent être connectées après border-radius. Pour une valeur d'attribut comme celle ci-dessus, les quatre coins prendront par défaut cette valeur d'attribut. Si les quatre valeurs d'attribut sont évidemment relatives aux quatre coins, quelle est la méthode relative ? En partant du coin supérieur gauche et en allant dans le sens des aiguilles d’une montre.
Exemple:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></body></html>Résultats en cours d'exécution :
Par exemple, dessinons un œuf :
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>Résultats en cours d'exécution :
