Créer une boîte arrondie avec CSS

Nous allons ensuite créer une page xHTML, qui contient deux zones de contenu contenues par des DIV avec les ID fixesBox et FlowBox. Ce sont deux DIV avec une largeur fixe et une largeur non fixe. Nous allons maintenant créer une page pour ces deux DIV avec des coins arrondis. .

La théorie que nous utilisons est que lors de l'ajout d'un arrière-plan à un élément, l'image d'arrière-plan apparaît toujours au-dessus de la couleur d'arrière-plan ; pour créer un rectangle arrondi de couleur unie, nous pouvons d'abord créer un rectangle normal, puis utiliser Utiliser une image aux coins arrondis. avec la même couleur que le fond des quatre coins arrondis de cet élément pour former un cadre aux coins arrondis. La méthode sera expliquée en détail ci-dessous dans deux cas : les boîtes de taille fixe et les boîtes de diffusion en continu de taille non fixe.

Ajouter des coins arrondis à une boîte de taille fixe Étape 1 : Créez un document xHTML de base et ajoutez-y un peu de contenu
afficher la copie ordinaire dans le presse-papiers ?

afficher la copie en clair dans le presse-papiers ?
corps, html {
marge : 0 ;
remplissage : 0 ;
arrière-plan : #a7a09a ;
couleur : #000 ;
}

corps, html {
marge : 0 ;
remplissage : 0 ;
arrière-plan : #a7a09a ;
couleur : #000 ;
}Étape 2 : Définissez la largeur et la couleur d'arrière-plan du DIV
afficher la copie ordinaire dans le presse-papiers ?
div#fixedBox {
largeur : 340 px ;
marge : 40 px ;
arrière-plan :#E4ECF9 ;
}

div#fixedBox {
largeur : 340 px ;
marge : 40 px ;
arrière-plan :#E4ECF9 ;
}Étape 3 : Créez un rectangle arrondi en fonction de la largeur du DIV. Puisque j'ai défini la largeur du DIV sur 340 px, je dois maintenant créer un rectangle arrondi d'une largeur de 340 px. Après avoir créé le rectangle, placez la partie supérieure. du rectangle entier avec La partie inférieure a été découpée et utilisée comme image DIV J'ai réalisé les deux images suivantes :

Étape 4 : Appliquer l'image à l'arrière-plan DIV
afficher la copie ordinaire dans le presse-papiers ?
div#fixedBox {
largeur : 340 px ;
marge : 40 px ;
background:#E4ECF9 url(images/bottom.gif) centre inférieur sans répétition ;
}

div#fixedBox {
largeur : 340 px ;
marge : 40 px ;
background:#E4ECF9 url(images/bottom.gif) centre inférieur sans répétition ;
}div#fixedBox h2{
marge : 0 ;
remplissage : 2 px ;
background:#E4ECF9 url(images/top.gif) en haut au centre sans répétition ;
}

Ci-dessus, nous appliquons l'image nommée Bottom.gif au bas du DIV, puis utilisons Top.gif sur le premier élément H2 du DIV. Bien sûr, la première chose à laquelle nous devons faire attention ici est que nous ne pouvons pas ajouter. Marge à h2 Value ou ajoutez un remplissage ou une bordure à DIV.

Créez une boîte arrondie à largeur non fixe. Ce que nous avons dit ci-dessus est de créer une boîte arrondie à largeur fixe mais pas à hauteur fixe. Cela nécessite deux images, en haut et en bas. Donc, maintenant, si nous ne fixons pas la largeur et la hauteur. , réfléchissez-y un instant, vous constaterez que cette fois nous devrons utiliser 4 images, une image dans chaque coin pour créer un rectangle arrondi qui peut être réduit de n'importe quelle manière. Nous devons d'abord créer un conteneur DIV et. ajouter du contenu de base.

Étape 1 : Créer un document xHTML
afficher la copie ordinaire dans le presse-papiers ?

La deuxième étape consiste à créer des coins arrondis. Créez quatre coins arrondis. Les coins arrondis se trouvent dans les directions supérieure gauche, inférieure gauche, supérieure droite et inférieure droite. Les coins arrondis que j'ai réalisés sont les suivants :

Étape 3 : Définir la couleur d’arrière-plan de la

copie ordinaire DIVview sur clipboardprint ?
div#flowBox {
marge : 40 px ;
arrière-plan :#C3D9FF ;
}

div#flowBox {
marge : 40 px ;
arrière-plan :#C3D9FF ;
} Étape 5 : Ajouter des coins arrondis

. Pour les conteneurs DIV sans largeur ni hauteur fixes, tout coin arrondi doit pouvoir changer de position en fonction des changements de largeur et de hauteur du DIV, nous ne pouvons donc ajouter que des coins arrondis au fixe. -width DIV. Les images à largeur fixe utilisées ici sont traitées en deux petites images et peuvent être ajoutées directement à l'élément H2. Maintenant, après avoir ajouté l'élément H2, nous n'obtenons qu'un seul côté du coin arrondi, et il y a toujours. un coin arrondi pouvant être utilisé dans H2 est obtenu, de sorte que deux coins arrondis soient résolus, et l'élément p peut fournir un coin arrondi, et le div lui-même a un coin arrondi, soit exactement quatre coins arrondis.

afficher la copie ordinaire dans le presse-papiers ?
div#flowBox {
marge : 40 px ;
background:#C3D9FF url(images/bottom-left.gif) pas de répétition en bas à gauche ;
}

div#flowBox h2{
marge : 0 ;
remplissage : 0 ;
background:#C3D9FF url(images/top-left.gif) pas de répétition en haut à gauche ;
}

div#flowBox h2 span{
marge : 0 ;
affichage:bloc;
background:#C3D9FF url(images/top-right.gif) pas de répétition en haut à droite ;
}

div#flowBox p{
marge : 0 ;
remplissage : 0 ;
arrière-plan :#C3D9FF url(images/bottom-right.gif) pas de répétition en bas à droite ;
}