Wie mache ich einen transparenten Rahmen mit CSS?

Question

Ich versuche so etwas für einen Kunden, der einen Blog hat.

wollte sie eine halb transparente Grenze. Ich weiß, dass das möglich ist, wenn man es nur als Hintergrund verwendet. Aber ich kann nicht die Logik/Code hinter dieser Art von CSS-Technik für Banner finden. Weiß jemand, wie man das macht? Es wäre eine große Hilfe sein, denn das ist der Wunsch meines Klienten suchen ist für seinen Blog zu erreichen ....

Answer 1

Nun, wenn Sie völlig transparent wollen, als Sie

border: 5px solid transparent; 

verwenden Wenn Sie opak/transparent bedeuten , als Sie

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

Hier verwenden, bedeutet a alpha, die Sie skalieren, 0-1.

Auch einige könnte darauf hindeuten, Sie opacity zu verwenden, die auch die gleiche Arbeit tut, ist der einzige Unterschied, den es auch in untergeordneten Elemente immer undurchsichtig führen, ja, es gibt einige Workarounds, aber rgba scheint besser als opacity verwenden.

Für älteren Browser, erklären immer die Hintergrundfarbe mit # (hex) ebenso einen Fall zurück, so dass, wenn alter Browser die rgba nicht erkennt, werden sie die hex Farbe Ihres Element anwenden.

Demo

Demo 2 (mit einem Hintergrundbild für verschachtelte div)

Demo 3 (Mit einem img-Tag statt ein 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*/ 
} 

Hinweis (für Demo 3): Das Bild wird entsprechend der Höhe skaliert und Breite zur Verfügung gestellt, so stellen Sie sicher, dass es nicht tut Zerbrechen Sie nicht das Skalierungsverhältnis.

Answer 2

Verwendung rgba (rgb mit alpha transparency):

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

Die alpha transparency variate zwischen 0 (0% Opazität = 100% transparent) und 1 (100 Opazität = 0% transparent)

Answer 3

Verwendung das :before Pseudoelement,
des CSS3 border-radius,
und einige Transparenz ist ganz einfach:

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

Die :before legt unser .circle ein anderes Element, das Sie machen müssen (ok, Block , absolut, etc ...) transparent und spielen mit der Border Opazität.

Answer 4

Sie können border-style: double mit background-clip: padding-box auch ohne die Verwendung von zusätzlichen (Pseudo-) Elementen verwenden. Es ist wahrscheinlich die kompakteste Lösung, aber nicht so flexibel wie die anderen.

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

Wenn man genau hinschaut sieht man, dass die Kante zwischen der Grenze und dem Hintergrund nicht perfekt ist. Dies scheint in aktuellen Browsern ein Problem zu sein. Aber es ist nicht so auffällig, wenn die Grenze klein ist.