Внутренний радиус границы не работает

Question

У меня вопрос о границе. В основном я использую код для создания своего рода средства подсветки, чтобы найти скрытый html. Вот скрипка: http://jsfiddle.net/pwneth/hj57k/1899/

CSS:

#tail { 
border: 1000px solid #fff; 
position: absolute; 
float: left; 
height: 100px; 
width: 100px; 
background-color: rgba(0,0,0,.0); 
z-index: 100; 
top: 0px; 
left: 0px; 
pointer-events:none; 
-moz-box-shadow: inset 0 0 20px #000000; 
-webkit-box-shadow: inset 0 0 20px #000000; 
box-shadow:   inset 0 0 20px #000000; 
} 

мне нужно каким-то образом установить радиус границы фигуры, чтобы сделать вид, как круг. Однако это проблема, потому что это влияет только на внешнюю границу, которая не является чем-то, что я хочу сделать. Только внутри границы.

Answer 1

Вот простой вариант:

Fiddle

Просто поместите границы радиуса на исходном элементе.

#tail 
{ 
    /* ... */ 
    border-radius:100%; 
} 

Затем просто спрячьте все, пока мышь не будет над ним.

body /* or whatever element you want */ 
{ 
    display:none; 
} 

Тогда это сделать:

$(document).bind('mouseenter', function (e) { 
    $('body').show(); 
}); 
$('body').bind('mouseleave', function (e) { 
    $(this).hide(); 
}); 

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

Answer 2

Это решение является более общим, и следует использовать, если желаемая форма округляется квадрата или прямоугольника

Использование after псевдо-элемент: http://jsfiddle.net/hj57k/1903/

#tail { 
    border: 1000px solid #fff; 
    position: absolute; 
    float: left; 
    height: 100px; 
    width: 100px; 
    background-color: rgba(0,0,0,.0); 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    pointer-events:none; 
} 
#tail:after { 
    -webkit-box-shadow: inset 0 0 20px #000000; 
    -moz-box-shadow: inset 0 0 20px #000000; 
    box-shadow:   inset 0 0 20px #000000; 
    border: 10px solid white; 
    border-radius: 20px; 
    content: ''; 
    display: block; 
    height: 100%; 
    left: -10px; 
    position: relative; 
    top: -10px; 
    width: 100%; 
} 

Вам нужно относительное позиционирование к покройте левый верхний край, который в противном случае все еще будет видимым. Остерегайтесь использования несоответствия размерности браузера или браузера, это работает в webkit, возможно, это не так для IE.

Answer 3

Jakub близок, но это создает предполагаемый круг.

http://jsfiddle.net/hj57k/1905/

#tail { 
    border: 1000px solid #fff; 
    position: absolute; 
    float: left; 
    height: 100px; 
    width: 100px; 
    background-color: rgba(0,0,0,.0); 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    pointer-events:none; 
} 
#tail:after { 
    -webkit-box-shadow: inset 0 0 20px #000000; 
    -moz-box-shadow: inset 0 0 20px #000000; 
    box-shadow:   inset 0 0 20px #000000; 
    border: 50px solid white; 
    border-radius: 999px; 
    content: ''; 
    display: block; 
    height: 100%; 
    left: -50px; 
    position: relative; 
    top: -50px; 
    width: 100%; 
} 

Answer 4

Без слишком много изменений: jsFiddle

В целом, набор border-radius = border-width + radius.