Partager des conseils sur l'utilisation des effets de bordure CSS

Comment réaliser des bordures translucides ? Comment mettre en œuvre plusieurs frontières ? Cet article partage des techniques pour implémenter des effets de bordure CSS. Les amis intéressés peuvent s'y référer

Cet article partage des techniques pour implémenter des effets de bordure CSS pour votre référence

1. Mise en place de bordures translucides

Nous avons une exigence : dans une zone avec un fond image, définir une zone avec p Blanc avec bordure blanche translucide . La première chose qui vient à l'esprit lors de l'implémentation de ceci est que vous pouvez définir la transparence pour la frontière. Le code est le suivant :

p{   
background:white;   
border:20px solidhsla(0,0%,100%,.5);   
}

Ici, hsla est une méthode de. définir la couleur, et ses différents paramètres La signification est la suivante :

H : Hue (teinte). 0 (ou 360) représente le rouge, 120 représente le vert, 240 représente le bleu et d'autres valeurs peuvent également être utilisées pour spécifier les couleurs. La valeur est : 0 - 360

S : Saturation. La valeur est : 0,0% - 100,0%

L : Légèreté. La valeur est : 0,0% - 100,0%

A : Transparence Alpha. La valeur est comprise entre 0 et 1

Lorsque nous avons exécuté le paramètre de style ci-dessus dans le navigateur, nous avons constaté que le résultat souhaité n'apparaissait pas. p est juste un p blanc pur sans aucun effet de bordure.

La raison de ce problème est que le p blanc bloque la bordure blanche translucide. Parce que si un p est défini sur blanc, alors toute la couleur du modèle de boîte de ce p sera blanche. Si une bordure blanche translucide est définie, elle ne sera pas affichée lorsqu'elle sera placée dans ce p blanc (il n'y a aucun moyen d'afficher la bordure lorsqu'elle est mise en valeur par la couleur blanche de p).

Pour résoudre ce problème, vous devez utiliser le nouvel attribut en CSS3 - background-clip. background-clip spécifie la zone de dessin de l'arrière-plan :

border-box L'arrière-plan est découpé à la zone de bordure

padding-box L'arrière-plan est découpé à la zone de remplissage

content-box L'arrière-plan est découpé dans la zone de contenu

Par défaut, la valeur de background-clip est border-clip, ce qui signifie que l'arrière-plan défini est appliqué à l'ensemble et au modèle dans notre. exemple ci-dessus, tout le p a été Tous les bords sont blancs. Ainsi, si nous définissons la valeur de l'attribut background-clip sur padding-box, nous pouvons remplir la bordure extérieure sans couleur et afficher la bordure translucide définie. Le code est le suivant :

p{   
       background:white;   
       border:20pxsolid hsla(0,0%,100%,.5);   
       background-clip:padding-box;   
}

<.>

Lorsque le style ainsi défini est réexécuté dans le navigateur, l'effet de bordure blanche translucide attendu apparaîtra.

2. Bordures multiples

Parfois, pour l'effet spécial d'un élément, vous devrez peut-être ajouter plusieurs bordures à l'élément. Voici deux méthodes pour ajouter plusieurs bordures. .

1.box-shadow

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.

2.contour

Si nous avons seulement besoin de dessiner deux couches de bordures, nous pouvons également le faire en utilisant 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que vous pourrez maîtriser les compétences d'implémentation des bordures CSS. Merci d'avoir lu.

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!