Maison > interface Web > tutoriel CSS > Comment faire un quart de cercle en CSS

Comment faire un quart de cercle en CSS

青灯夜游
Libérer: 2021-11-09 14:01:20
original
8165 Les gens l'ont consulté

Comment créer un quart de cercle en CSS : 1. Utilisez les attributs width et height pour définir la largeur et la hauteur de l'élément pour qu'elles soient égales. 2. Utilisez l'attribut border-radius pour définir la valeur d'un coin arrondi de l'élément ; élément à la valeur de largeur et de hauteur, et les trois autres cercles. La valeur de l'angle est 0 et la syntaxe est "border-radius: width or height value 0 0 0;".

Comment faire un quart de cercle en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, lorsqu'il s'agit de créer des cercles, l'attribut border-radius vient à l'esprit.

Cet attribut peut transformer un élément carré de largeur et de hauteur égales en cercle

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>
Copier après la connexion

Comment faire un quart de cercle en CSS

Mais parfois nous n'avons pas besoin d'un cercle complet, mais seulement d'une partie, en utilisant un quart de cercle, comment faire ?

Ou utilisez l'attribut border-radius pour définir la valeur d'un coin arrondi de l'élément sur la valeur de largeur ou de hauteur, et la valeur des trois autres coins arrondis sur 0 :

border-radius: 50px 0 0 0;
Copier après la connexion

Comment faire un quart de cercle en CSS

border-radius: 0 50px 0 0;
Copier après la connexion

Comment faire un quart de cercle en CSS

border-radius: 0 0 50px 0;
Copier après la connexion

Comment faire un quart de cercle en CSS

border-radius: 0 0 0 50px;
Copier après la connexion

Comment faire un quart de cercle en CSS

(Partage de vidéos d'apprentissage : 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal