Comment créer des bordures semi-transparentes en CSS ?

Comment établir des bordures semi-transparentes en CSS

En CSS, la définition de la propriété opacité affecte la transparence de l'élément entier, y compris son texte. Pour créer des bordures semi-transparentes, une approche simple n'est pas disponible. Cependant, le format de couleur rgba vous permet d'obtenir cet effet.

Par exemple, le code suivant définit une bordure rouge 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 */
}

Pour les navigateurs qui ne prennent pas en charge rgba (IE8 et versions antérieures), une stratégie de double frontière est nécessaire. La première bordure est définie sur une fausse opacité, tandis que la seconde représente l'opacité réelle souhaité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 simule une bordure rouge opaque à 50 % sur du blanc, créant l'effet souhaité sur la plupart des navigateurs.

Pour garantir que la bordure reste transparente même avec une couleur d'arrière-plan unie, ajoutez background-clip: padding-box; comme le montrent les exemples ci-dessus.

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!