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!