ошибка рендеринга тени и рамки - PullRequest
Новая
       37

ошибка рендеринга тени и рамки

4 голосов
/ 21 января 2012

Css вызывает "ошибку": 

div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}

Похоже, что между вставкой box-shadow и окружающей границей существует какая-то прозрачная граница размером 1 пиксель.

Взгляните на этот живой пример , я мог бы воспроизвести эту странность рендеринга с последними выпусками Chrome, Firefox и IE.(таким образом, не делая движок зависимым)

И это не происходит с меньшим радиусом границы (другими словами, это не происходит, когда фигура не является кругом)

РЕДАКТИРОВАТЬ:

Я не нашел способа заставить эту вещь исчезнуть, но использование низкой непрозрачности делает ее почти невидимой.Я буду использовать эту технику (и оставлю вопрос открытым), пока не придет решение real .

1 Ответ

4 голосов
/ 21 января 2012

Определенно выглядит как ошибка в box-shadow (при использовании аргумента распространения). В качестве обходного пути просто используйте оверлейный div. Вот код:

HTML: 

<div></div>
<div class="overlay"></div>

CSS: 

div {
    margin:10px;
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}
div.overlay {
    margin-top:-310px;
}

Вот скрипка: http://jsfiddle.net/eX3cy/1/

Изменить:

Вот скрипка с отрегулированным размытием и разбросом (чтобы показать, что могут быть достигнуты идентичные результаты за вычетом нежелательных деталей): http://jsfiddle.net/wgpzL/

...