Opacité de bordure

Question

Existe-t-il une méthode CSS directe pour rendre la bordure d'un élément semi-transparent avec quelque chose comme:

 border-opacity:0.7;
 

?

Sinon, est-ce que quelqu'un a une idée de comment je pourrais le faire sans utiliser d'images?

Answer 1

Malheureusement, l' opacity élément rend l'ensemble de l'élément (y compris le texte) semi-transparent. La meilleure façon de faire de la frontière semi-transparente avec la couleur rvba format. Par exemple, cela donnerait une bordure rouge avec 50% d'opacité:

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

Le problème avec cette approche est que certains navigateurs ne comprennent pas l' rgba format et n'affiche pas de frontière si c'est l'ensemble de la déclaration. La solution est de fournir deux transfrontalières déclarations. La première avec un faux opacité, et la seconde avec le réel. Si un navigateur est capable, il va utiliser la seconde, si non, il va utiliser la première.

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 sur la frontière sera l'équivalent de la couleur à un 50% opaque bordure rouge sur un fond blanc (bien que les graphiques en vertu de la frontière, qui ne traverse pas).

Mise à JOUR: j'ai ajouté "background-clip: padding-box;" à cette réponse (par SooDesuNe de la suggestion dans les commentaires) pour s'assurer de la frontière reste transparente, même si un solide arrière-plan la couleur est appliquée.

Answer 2

C’est facile, utilisez une ombre pleine avec offset de 0 :

Aussi, si vous définissez un border-radius sur l’élément, il vous donne des frontières assez arrondies

jsFiddle démo

Answer 3

Comme d'autres l'ont mentionné: CSS-3 dit que vous pouvez utiliser l' rgba(...) de la syntaxe pour spécifier une couleur de bordure avec une opacité (alpha) de la valeur.

voici un exemple rapide si vous souhaitez vérifier.

• Il fonctionne dans Safari et Chrome (probablement fonctionne dans tous les navigateurs webkit).

• Il fonctionne dans Firefox

• Je doute que ça marche sous IE, mais je soupçonne qu'il y a de filtre ou d'un comportement qui le font fonctionner.

Il y a aussi cette stackoverflow post, ce qui suggère quelques autres questions, à savoir, que la frontière rend sur le dessus-de la couleur de fond (ou image d'arrière-plan) que vous avez spécifié; ce qui limite l'utilité de la frontière alpha dans de nombreux cas.

Answer 4

pas autant que je sache il n’est pas ce que je fais normalement dans ce genre de circonstances est de créer un bloc sous avec un size((bordersize*2)+originalsize) plus grand et les rendre transparentes à l’aide

Answer 5

Essayez ceci

Et voici notre CSS magique...

Découvrez la démo ici.