Comment puis-je créer des bordures semi-transparentes en CSS sans utiliser d'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 */
}

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 */
}

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!