Maison > interface Web > tutoriel CSS > Comment CSS implémente diverses formes

Comment CSS implémente diverses formes

coldplay.xixi
Libérer: 2023-01-05 16:09:21
original
3655 Les gens l'ont consulté

Comment implémenter diverses formes avec CSS : 1. Lorsque vous définissez CSS pour un cercle, définissez la largeur et la hauteur pour qu'elles soient égales, puis définissez l'attribut [border-radius] sur la moitié de la largeur ou de la hauteur 2 ; . Un carré est un graphique CSS L'un des graphiques les plus simples de , utilise également un div et définit un identifiant.

Comment CSS implémente diverses formes

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment implémenter diverses formes avec CSS :

1 Cercle

Pour utiliser CSS pour créer un cercle, nous. besoin d'un div avec un identifiant défini.

<div id="circle"></div>
Copier après la connexion

Pour un cercle, définissez la largeur et la hauteur pour qu'elles soient égales lors de la définition du CSS, puis définissez l'attribut border-radius sur la moitié de la largeur ou de la hauteur :

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
Copier après la connexion

2 . Carré

Le carré est l'une des formes les plus simples des graphiques CSS. Il utilise également un div et définit un identifiant.

<div id="square"></div>
Copier après la connexion


Le style CSS carré n'a besoin que de définir la même largeur et la même hauteur.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
Copier après la connexion

Recommandations de tutoriel 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!

Étiquettes associées:
css
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