Comment faire une boîte flexible en CSS3

Parfois, nous avons besoin d'écrire une boîte flexible en CSS3, alors comment faire ce code ? Cela nécessite l'utilisation de notre attribut box-shadow , qui permet à la boîte de produire un effet d'ombre lorsqu'elle est affichée. Voici une explication détaillée de la façon d'écrire

 :

         box-shadow: length length length color; 🎜>Le troisième paramètre représente le rayon de flou de l'ombre

Le quatrième paramètre représente la couleur de l'ombre

Utiliser des ombres sur les éléments dans le box

Vous pouvez appliquer individuellement des ombres aux éléments de la boîte. Les éléments utilisent des ombres.

Vous pouvez utiliser le sélecteur de première lettre ou le sélecteur de première ligne pour laisser uniquement le premier texte ou la première ligne avoir l'

effet d'ombre

pour le tableau

et cellules utilisant des ombres

Vous pouvez utiliser l'attribut box-shadow pour créer un effet d'ombre sur le tableau et les cellules du tableau.

Spécifiez la méthode de calcul de la largeur et de la hauteur de l'élément

En CSS3, utilisez l'attribut box-sizing pour spécifier la méthode de calcul de la largeur et de la hauteur de l'élément

box- Attribut de dimensionnement

En CSS, utilisez l'attribut width et l'attribut height pour spécifier la largeur et la hauteur de l'élément.

Mais en utilisant l'attribut box-sizing, vous pouvez spécifier si les valeurs de largeur et

hauteur spécifiées avec l'attribut width et l'attribut height incluent respectivement la zone de remplissage à l'intérieur de l'élément, ainsi comme la largeur et la hauteur de la bordure.

Les valeurs d'attribut qui peuvent être spécifiées pour l'attribut box-sizing sont la valeur de l'attribut content-box et la valeur de l'attribut border-box. Le premier signifie que la largeur et la hauteur de l'élément n'incluent pas la zone de remplissage interne, et la largeur et la hauteur de la bordure

La seconde signifie que la largeur et la hauteur de l'élément incluent la zone de remplissage interne. , ainsi que la largeur et la hauteur de la bordure.

Auparavant, la valeur par défaut était d'utiliser la valeur de l'attribut content-box.

De plus, vous pouvez spécifier la valeur de l'attribut

dans l'attribut box-sizing comme

padding

-box, c'est-à-dire la largeur spécifiée et

le contenu en hauteur inclut La largeur et la hauteur du contenu ainsi que la largeur et la hauteur de la zone de remplissage intérieure

, à l'exclusion de la largeur et de la hauteur de la boîte latérale

sont utilisé pour contrôler la largeur totale de l'élément, si cet attribut n'est pas utilisé, la valeur par défaut

utilisée dans le style est la valeur de l'attribut content-box. Elle spécifie uniquement la largeur du contenu, mais ne spécifie pas. la

largeur totale de l'élément. Faites la désignation.

Dans certains cas, l'utilisation de la valeur de l'attribut border-box rendra la

mise en page

plus pratique.

Par exemple, tant que la valeur de l'attribut border-box des deux éléments div est définie sur 50 %, vous pouvez vous assurer que les deux éléments div

sont affichés côte à côte.

Voici comment créer une boîte flexible. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment insérer des images en HTML

À quoi devez-vous faire attention lorsque vous centrez des divs en HTML

Comment utiliser les commentaires if en html

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!