Maison > Article > interface Web > Une brève discussion sur la façon d'utiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure
Cet article vous présentera les bordures semi-transparentes CSS et les effets de bordure multiples dans deux scénarios. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)
Scène 1 :
Obtention d'une bordure translucide :
En raison du comportement par défaut des styles CSS, la plage de rendu de la couleur d'arrière-plan est contenu+padding+bordure.
La bordure translucide est affectée par la couleur principale, et l'effet obtenu est
Solution :
Utilisez l'attribut background-clip pour spécifier la zone de dessin de l'arrière-plan, afin que la zone de dessin soit limitée au contenu+padding.
div { border:10px solid rgba(0,0,0,.5); background: lightblue; background-clip: padding-box; }
Supplément : background-clip n'est pas compatible avec IE6-8, Opera10
Scénario 2 :
Réaliser plusieurs bordures :
Option 1 : Utiliser box-shadow pour générer plusieurs projections
Le code et l'effet sont les suivants :
div { background:#c3e6f4; box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea; }
Option 2 : Attribut de trait de combinaison de bordure de boîte (contour)
Caractéristiques : Il ne peut réaliser que des bordures doubles, ce qui est plus flexible et peut utiliser des lignes pointillées et d'autres effets
Le code et l'effet sont les mêmes. suit :
div { border: 6px dashed #c3f4ec; outline: 10px solid #d9faf6; background-clip: padding-box; }
Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !
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!