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

Comment CSS implémente diverses formes

coldplay.xixi
coldplay.xixioriginal
2021-04-16 16:09:453603parcourir

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>

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;
}

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>


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;
}

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!

Déclaration:
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