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

Une brève discussion sur la façon d'utiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure

青灯夜游
青灯夜游avant
2021-01-20 15:53:342170parcourir

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.

Une brève discussion sur la façon d'utiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure

(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

Une brève discussion sur la façon dutiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure

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;
}

Une brève discussion sur la façon dutiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure

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;
}

Une brève discussion sur la façon dutiliser CSS pour obtenir des bordures translucides et de multiples effets de bordure

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer