web-dev-qa-db-fra.com

Comment faire une bordure transparente en utilisant CSS?

J'essaie de faire quelque chose comme ça pour un client qui a un blog.

http://i.stack.imgur.com/4h31s.png

Elle voulait une bordure semi-transparente. Je sais que cela est possible en faisant juste un fond. Mais je n'arrive pas à trouver la logique/code derrière ce genre de technique CSS pour les bannières. Est-ce que quelqu'un sait comment faire ça? Ce serait très utile, car c'est ce que mon client souhaite obtenir pour son blog ....

htmlcsscss3border
40
user2578407

Eh bien, si vous voulez totalement transparent que vous pouvez utiliser

border: 5px solid transparent;

Si vous voulez dire opaque/transparent, que vous pouvez utiliser

border: 5px solid rgba(255, 255, 255, .5);

Ici, a signifie alpha, que vous pouvez mettre à l'échelle, 0-1.

Certains pourraient également vous suggérer d’utiliser opacity, qui fait le même travail. La seule différence est que les éléments enfants deviendront opaques. Oui, il existe des solutions, mais rgba semble mieux que d'utiliser opacity.

Pour les anciens navigateurs, déclarez toujours la couleur d’arrière-plan en utilisant # _ (hex) comme une solution de secours, de sorte que si les anciens navigateurs ne reconnaissent pas le rgba, ils appliqueront la couleur hex à votre élément.

Démo

Démo 2 (Avec une image d'arrière-plan pour les div imbriqués)

Démo 3 (Avec une balise img à la place d'un background-image)

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

Remarque (pour la démo 3): l'image sera mise à l'échelle en fonction de la hauteur et de la largeur fournies, assurez-vous donc qu'elle ne casse pas le rapport de mise à l'échelle.

74
Mr. Alien

Vous pouvez aussi utiliser border-style: double avec background-clip: padding-box, sans utiliser d’éléments (pseudo-) supplémentaires. C'est probablement la solution la plus compacte, mais pas aussi flexible que les autres.

Par exemple :

<div class="circle">Some text goes here...</div>

.circle{
    width: 100px;
    height: 100px;
    padding: 50px;
    border-radius: 200px;
    border: double 15px rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.7);
    background-clip: padding-box;
}

Result

Si vous regardez de plus près, vous pouvez constater que le bord entre la bordure et l'arrière-plan n'est pas parfait. Cela semble être un problème dans les navigateurs actuels. Mais ce n'est pas visible quand la frontière est petite.

11
Qtax

En utilisant le :before pseudo-élément,
CSS3's border-radius,
et un peu de transparence est assez simple:

LIVE DEMO

enter image description here

<div class="circle"></div>

[~ # ~] css [~ # ~] :

.circle, .circle:before{
  position:absolute;
  border-radius:150px;  
}
.circle{  
  width:200px;
  height:200px;
  z-index:0;
  margin:11%;
  padding:40px;
  background: hsla(0, 100%, 100%, 0.6);   
}
.circle:before{
  content:'';
  display:block;
  z-index:-1;  
  width:200px;
  height:200px;

  padding:44px;
  border: 6px solid hsla(0, 100%, 100%, 0.6);
  /* 4px more padding + 6px border = 10 so... */  
  top:-10px;
  left:-10px; 
}

Le :before attache à notre .circle un autre élément que vous devez seulement rendre transparent (ok, bloquer, absolu, etc.) et jouer avec l'opacité de la bordure .

9
Roko C. Buljan

utiliser rgba (rgb avec alpha transparency):

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity

Le alpha transparency varie entre 0 (opacité 0% = 100% transparent) et 1 (opacité 100 = 0% transparent)

2
Ghilas BELHADJ