HTML implémente facilement un exemple de rectangle arrondi

Cet article présente principalement en détail la méthode pour réaliser facilement l'exemple de rectangle arrondi en Html, et vous explique comment réaliser le rectangle arrondi via p css et positionnement ? Les amis intéressés peuvent se référer à

Question : Comment implémenter un rectangle arrondi via p css et positionnement ?

Aperçu de la solution :

Contenu : ajoutez d'abord un grand calque à l'intérieur de la balise (le grand calque est utilisé pour fixer le grand cadre global ), puis le grand calque contient quatre petits calques (placez quatre coins arrondis dans chacun des quatre petits calques (utilisez PS pour réaliser une forme ovale à l'avance, puis utilisez l'outil Slice pour couper l'image))

Style : attributs qui doivent être définis dans la balise head> 🎜> : relatif ;

2. Largeur et hauteur ; 3 Couleur de fond

4. après ajustement Vous pouvez supprimer le réglage de la bordure)

Lors de la définition du CSS d'un petit calque, les attributs qui doivent être inclus dans chaque calque sont :

1.position :
2. Largeur et hauteur;

3. Attributs de direction (
gauche
,
droite
,
bas, haut) 4.background: url ("") no-repeat; (introduisant des images aux coins arrondis dans toutes les directions)
Ce qui suit est mon code à implémenter un rectangle arrondi :
Remarque : Le style CSS utilisé dans mon code est en ligne. Il existe trois styles CSS : en ligne, intégré et externe.

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!