Maison > interface Web > tutoriel CSS > Comment puis-je créer des bordures semi-transparentes en CSS sans utiliser d'images ?

Comment puis-je créer des bordures semi-transparentes en CSS sans utiliser d'images ?

Patricia Arquette
Libérer: 2024-11-11 08:51:02
original
489 Les gens l'ont consulté

How Can I Create Semi-Transparent Borders in CSS Without Using Images?

Opacité des bordures d'éléments en CSS

CSS peut-il obtenir l'effet semi-transparent pour les bordures d'éléments en utilisant une propriété telle que border-opacity : 0,7 ? Bien qu'une telle propriété n'existe pas, voici des solutions alternatives pour obtenir cet effet sans recourir aux images.

Format de couleur RGBA

Le format de couleur rgba permet de définir à la fois couleur et opacité. Par exemple, pour créer une bordure rouge avec une opacité de 50 % :

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
Copier après la connexion

Déclarations à double bordure

Pour les navigateurs plus anciens qui ne prennent pas en charge rgba (IE8 et versions antérieures) , vous pouvez fournir plusieurs déclarations de bordure :

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
Copier après la connexion

La première déclaration se rapproche d'une bordure rouge opaque à 50 % sur un fond blanc arrière-plan, masquant tous les graphiques en dessous.

Considérations supplémentaires

Le clip d'arrière-plan : padding-box ; La propriété garantit que la bordure reste transparente même si une couleur d'arrière-plan unie est appliquée.

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 de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal