Explication détaillée de la façon d'implémenter plusieurs bordures en CSS3

Le box-shadow de CSS3 est vraiment puissant pour créer plusieurs bordures. C'est également l'objectif de cet article d'expliquer en détail la méthode d'implémentation de plusieurs bordures en CSS3. Mais avant cela, jetons un œil à la méthode traditionnelle. avec une meilleure compatibilité :

Méthode 1 : p imbrication pour obtenir plusieurs bordures.

Rendu :

code html

<p id="outer">
    <p id="inner">p嵌套实现多重边框</p>
</p>

code css

#outer {   
    width: 100px;   
    height: 100px;   
    background-color: bisque;   
    border: 10px solid brown;   
    position: relative;   
}   

#inner {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
}   
/*#outer,
#inner {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

Inconvénients : Il peut ne pas être possible de modifier la structure ou le coût de modification de la structure HTML est élevé lorsque plusieurs ps sont définis avec des coins arrondis, les frontières ne peuvent pas s’adapter parfaitement. Rendus multi-bordures arrondis :

Méthode 2 : Utilisez le décalage de contour du contour pour obtenir plusieurs bordures.
Si nous avons seulement besoin de dessiner deux couches de bordures, nous pouvons également utiliser le contour. Le contour est un calque situé à l'extérieur de la bordure, ce qui correspond au principe de la bordure. En définissant le style de contour, vous pouvez définir un autre calque de bordure en dehors de la bordure.
Cependant, il convient de noter que la bordure définie par l'attribut outline ne changera pas avec le changement du style de bordure de l'élément interne. En d’autres termes, si la bordure de l’élément a des coins arrondis, la bordure la plus extérieure dessinée par le contour est toujours rectangulaire. Il s’agit d’un défaut des bordures de dessin de contour.
Rendu :

code html

<p id="outline">outlie实现多重边框</p>

code css

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/
}

Avantages : Il est similaire à une bordure et peut être défini sur différents types de lignes, tels que des lignes pointillées et des lignes pleines.

Inconvénients : le contour n'affecte pas la mise en page, vous devez utiliser la marge pour faire de la place à la bordure. pour éviter qu'il soit recouvert par d'autres éléments. Si le conteneur lui-même a des coins arrondis, le trait ne peut pas s'adapter complètement aux coins arrondis. Le rendu est le suivant :

Méthode 3 : Utiliser la projection externe de l'ombre de la boîte pour obtenir plusieurs. frontières.
L'attribut box-shadow peut définir l'ombre du modèle de boîte. Mais en fait, il a aussi pour fonction de fixer des frontières.
box-shadow peut transmettre cinq paramètres. Les deux premiers paramètres représentent le décalage de la projection, le troisième paramètre représente le degré de flou de la projection, le quatrième paramètre représente l'expansion de la projection et le dernier paramètre représente la couleur. de la projection. Cependant, nous utilisons rarement le quatrième paramètre. L'utilisation du quatrième paramètre ici permet d'agrandir la projection. En définissant une valeur plus appropriée, l'effet de la bordure peut être simulé.
De même, l'attribut box-shadow peut transmettre une liste de plusieurs ombres, séparées par ",". Par conséquent, tant que nous définissons une liste fantôme et augmentons progressivement la valeur de son paramètre d'expansion, nous pouvons dessiner l'effet de plusieurs bordures.
Rendu :

code html

<p id="boxShadow">boxshadow实现多重边框(外投影)</p>

code css

#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/
}

Avantages : plusieurs coins arrondis s'emboîtent parfaitement en même temps, vous pouvez également recevoir une liste et définir plusieurs projections (c'est-à-dire des bordures) en même temps ; Son effet d'expansion est basé sur la forme de l'élément lui-même. Si l'élément est un rectangle, il se développera en un rectangle plus grand ; si l'élément a des coins arrondis, il se développera également en coins arrondis.

Inconvénients : attributs CSS3, mauvaise compatibilité ; box-shadow n'affecte pas la mise en page. Si la position relative de cet élément et d'autres éléments est importante, vous devez utiliser des marges et d'autres méthodes pour ajouter de l'espace supplémentaire pour ceux-ci. "Border" fait de la place pour éviter qu'il ne soit recouvert par d'autres éléments.

Remarque : l'utilisation de l'ombre en ligne (c'est-à-dire que le paramètre ajouté box-shadow est encadré, la valeur par défaut est l'ombre extérieure lorsqu'elle n'est pas définie) semble être un meilleur choix. Étant donné que les ombres portées en ligne permettent à l'ombre portée d'apparaître à l'intérieur de l'élément, il est plus facile de définir un remplissage pour laisser de la place à plusieurs bordures à l'intérieur de l'élément.

Méthode 4 : Utilisez la projection intérieure de l'ombre de la boîte pour obtenir plusieurs bordures. (Recommandé)

Rendu :

code html

<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>

code css

/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/
}

Avantages : L'ombre en ligne permet à l'ombre d'apparaître à l'intérieur de l'élément, et la définition du remplissage laisse de la place à plusieurs bordures à l'intérieur de l'élément, ce qui le rend plus facile à gérer.

Inconvénients : attributs CSS3, mauvaise compatibilité

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!