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

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

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

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

Ответы

Ответ 1

Хорошо, если вы хотите полностью прозрачно, чем использовать

border: 5px solid transparent;

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

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

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

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

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

Демо

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

Демо 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 
                         manually calculated*/
}

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

Ответ 2

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

Например:

<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

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

Ответ 3

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

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

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

Ответ 4

используйте 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% прозрачная)