Как сделать прозрачную границу с помощью CSS?

Question

Я пытаюсь сделать что-то подобное для клиента, у которого есть блог.

Она хотела Полупрозрачный границу. Я знаю, что это возможно, сделав его просто фоном. Но я не могу найти логику/код, лежащий в основе такого метода CSS для баннеров. Кто-нибудь знает, как это сделать? Было бы много помощи, потому что это выглядеть мой клиент хочет добиться для своего блог ....

Answer 1

Ну, если вы хотите полностью прозрачны, чем вы можете использовать

border: 5px solid transparent; 

Если вы имеете в виду непрозрачными/прозрачном , чем вы можете использовать

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

Здесь a означает альфа, который можно масштабировать, 0-1.

Кроме того, некоторые могли бы предложить вам использовать opacity, который делает ту же работу, а также, с той лишь разницей, что приведет к его дочерних элементов становится непрозрачным тоже, да, есть некоторые работы обходные но rgba кажется лучше, чем при использовании opacity.

Для более старых браузеров, всегда объявляет цвет фона, используя # (HEX) так же, как падение назад, так что, если старые браузеры не распознает rgba, они будут применять hex цвет к вашему элементу.

Demo

Demo 2 (с фоновым изображением для вложенных дел)

Demo 3 (с img теге вместо 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*/ 
} 

Примечания (для демо-3): Изображение будет масштабироваться в соответствии с высотой и шириной , поэтому убедитесь, что она 't разорвать коэффициент масштабирования.

Answer 2

использование rgba (RGB с alpha transparency):

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

alpha transparency варьировать в диапазоне от 0 (0% Непрозрачность = 100% прозрачный) и 1 (100 Непрозрачность = 0% прозрачный)

Answer 3

Использование :before псевдо-элемент,
CSS3-х border-radius,
и некоторые прозрачность является довольно легко:

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

:before придает нашему .circle другому элементу, который вам нужно только сделать (хорошо, блок , абсолютный и т. д.) прозрачный и играть с непрозрачностью .

Answer 4

Вы также можете использовать border-style: double с background-clip: padding-box, без использования каких-либо дополнительных элементов (псевдо). Это, наверное, самое компактное решение, но не такое гибкое, как другие.

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

Если вы посмотрите внимательно вы можете увидеть, что грань между границей и фоном не является совершенным. Это, по-видимому, проблема в текущих браузерах. Но это не так заметно, когда граница небольшая.