Div с прозрачным зазором внутри границы

У меня есть DIV разного размера, что необходимо иметь прозрачную область с последующей белой каймой, как показано на скриншоте:Div с прозрачным зазором внутри границы

gap between border and background

У меня нет проблем с получением красная прозрачность и форма правильны, но я в недоумении о том, как получить прозрачную область, за которой следует белая рамка. Как я могу это сделать?

источник

2015-02-20 CreateSean

Добавьте фиксированную высоту, фон rgb и тень для белой линии. Я скоро сделаю jsfiddle;) Извините ... box shadow doenst work вам нужно использовать вложенный div – KARC

Может ли показать ур код? –

_ У меня нет проблем с получением красной прозрачности и правильной формы. _ ... покажите нам код, чтобы кто-то мог его расширить. –

Вы делаете разрыв между цветом фона и границы с:

один элемент.
прозрачная граница, чтобы сделать прозрачный промежуток между тенью и фоном.
background-clip:padding-box;, чтобы закрепить фон внутри прозрачной границы (в противном случае цвет фона будет переполняться и появляться через прозрачную рамку, more info here).
a box-shadow с радиусом радиуса для внешней линии.

div { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    background: rgba(255, 0, 0, .7); 
 
    border: 10px solid transparent; 
 
    background-clip: padding-box; 
 
    box-shadow: 0 0 0 4px #fff; 
 
} 
 

 
/** FOR THE DEMO **/ 
 
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}

<div></div>

источник

2015-02-20 16:08:49

Ссылка на Fiddle

div{ 
    background: #f00; 
    height: 100px; 
    width: 100px; 
    border-radius: 100px; 
    position: relative; 
} 
div:before{ 
    content: ''; 
    top: -5px; 
    bottom: -5px; 
    left: -5px; 
    right: -5px; 
    border: 3px solid #000; 
    border-radius: 100px; 
    position: absolute; 
}

источник

2015-02-20 16:08:13

Я попытался также: http://jsfiddle.net/6o26j9e9/ Текст центрируется: D

body { 
    background-color: #333; 
    background: url('http://www.awesomeimages.net/wp-content/uploads/2011/09/4011001045_50701c52ff_b1.jpg'); 
    background-size: cover; 
} 

.border { 
    width: 500px; 
    height: 500px; 
    border-radius: 1000px; 
    border-radius: 50%; 
    border: 2px solid #FFF; 
    padding: 15px; 
    display: table; 
} 

.circle { 
    width: 100%; height: 100%; 
    border-radius: 1000px; 
    border-radius: 50%; 
    background: rgba(255,0,0,0.6); 
    text-align: center; 
    color: #FFF; 
    display: table-cell; 
    vertical-align: middle; 
    font-size: 70px; 

}

Обновлено: http://jsfiddle.net/6o26j9e9/1/

источник

2015-02-20 16:13:43 KARC

радиальные градиенты могут быть использованы также:

#test { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: 
 
    radial-gradient(circle at 120px center, 
 
     rgba(255, 0, 0, .5) 100px, 
 
     rgba(255, 0, 0, 0) 100px, 
 
     rgba(255, 255, 255, 0) 105px, 
 
     rgba(255, 255, 255, .5) 105px, 
 
     rgba(255, 255, 255, .5) 110px, 
 
     rgba(255, 255, 255, 0) 110px 
 
    ), 
 
    url(http://lorempixel.com/output/nature-q-c-1280-960-5.jpg) center/cover; 
 
}

<div id="test"></div>

Радиальные градиенты добавили преимущество. Например, вы можете рисовать эллипсы вместо кругов, добавлять границы и создавать более сложные шаблоны.

источник

2015-02-20 16:45:41

Div с прозрачным зазором внутри границы

ответ

Смежные вопросы