Comment puis-je créer des bordures semi-transparentes sans affecter l'opacité des éléments ?

La transparence des bordures CSS peut-elle sans affecter l'opacité des éléments ?

La propriété border-opacity n'existe pas en CSS. Cela soulève la question de savoir comment créer des bordures semi-transparentes sans l'inconvénient du contenu des éléments transparents.

Solution utilisant le format de couleur rgba

Le format de couleur rgba() permet pour les couleurs transparentes. Voici un exemple de création d'une bordure opaque à 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 */
}

Cette approche garantit que la transparence de la bordure n'affecte pas l'opacité du contenu de l'élément.

Approche alternative pour les plus âgés Navigateurs

Pour les navigateurs qui ne prennent pas en charge rgba (par exemple, IE8 et versions antérieures), un une solution à deux bordures peut être utilisée :

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 bordure fournit une fausse opacité, tandis que la deuxième bordure définit la bordure réelle avec la transparence souhaitée. Les navigateurs modernes ignoreront la première bordure, tandis que les navigateurs plus anciens l'utiliseront pour émuler la transparence.

Propriété Background-clip

Pour garantir que la bordure reste transparente même lorsqu'un une couleur d'arrière-plan unie est appliquée, le background-clip: padding-box; La propriété a été ajoutée aux exemples. Cela empêche l'arrière-plan d'affecter la transparence de la bordure.

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!