Come creare un bordo trasparente usando i CSS?

Question

Sto provando a fare qualcosa di simile per un cliente che ha un blog.

voleva un confine semi trasparente. So che è possibile renderlo solo uno sfondo. Ma non riesco a trovare la logica/codice dietro questo tipo di tecnica CSS per banner. Qualcuno sa come si fa questo? Sarebbe un grande aiuto perché questo è il look di voler raggiungere per il suo blog il mio cliente ....

Answer 1

Beh, se volete completamente trasparente è possibile utilizzare

border: 5px solid transparent; 

Se vuoi dire opaco/trasparente , che si può utilizzare

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

Qui, a significa alfa, che è possibile scalare, 0-1.

anche alcuni potrebbero suggerire di utilizzare opacity che fa lo stesso lavoro così, l'unica differenza è che si tradurrà in elementi figlio diventando opaca troppo, sì, ci sono alcuni arounds di lavoro ma rgba sembra meglio che usare opacity.

per browser meno recenti, dichiara sempre il colore di sfondo utilizzando # (hex) proprio come una caduta indietro, in modo che se vecchi browser non riconosce il rgba, applicheranno il colore hex al vostro elemento.

Demo

Demo 2 (con un'immagine di sfondo per div nidificato)

Demo 3 (Con un img tag al posto di 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*/ 
} 

Nota (Per Demo 3): L'immagine verrà ridimensionata in base all'altezza e alla larghezza di fornita, quindi assicurati che non Rompere il rapporto di ridimensionamento.

Answer 2

uso rgba (rgb con alpha transparency):

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

Il alpha transparency variata tra 0 (0% di opacità = 100% trasparente) e 1 (100 opacità = 0% trasparente)

Answer 3

Uso il :before pseudo-elemento,
di CSS3 border-radius,
e alcuni la trasparenza è abbastanza facile:

LIVE DEMO

<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; 
} 

La :before attribuisce al nostro .circle un altro elemento che avete solo bisogno di fare (ok, bloccare , assoluto, ecc ...) trasparente e gioca con l'opacità del bordo .

Answer 4

È inoltre possibile utilizzare border-style: double con background-clip: padding-box, senza l'uso di alcun elemento aggiuntivo (pseudo-). È probabilmente la soluzione più compatta, ma non così flessibile come le altre.

For example:

<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; 
} 

Se si guarda attentamente si può vedere che il bordo tra il confine e lo sfondo non è perfetto. Questo sembra essere un problema nei browser attuali. Ma non è così evidente quando il confine è piccolo.