Закругленные углы перекрытия

На сафари 6 или более ранних - изображение перекрывает закругленную границу. Есть ли в этом легкое решение? Я попытался добавить окружающий div с переполнением: скрытый, но результат был тот же.Закругленные углы перекрытия

Размер изображения неизвестен перед рукой.

http://jsfiddle.net/89VvB/

img { 
    border:5px solid black; 
    -webkit-border-radius:30px; 
    border-radius:30px; 
}

enter image description here

источник

2013-09-25 Wesley

Возможно, поставив 'img'' 'div' и сделав округление на последнем? –

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; это помогает? Не могу проверить это, поскольку у меня нет старой версии. –

@Pekka - Нет, уже пробовал это. Необходимо поплавать, хотя и добавить переполнение: скрытый, так как я не знаю размер изображения перед рукой. – Wesley

Если размер изображения не изменится, вы можете использовать <div> и установить изображение, чтобы быть фоном.

См http://jsfiddle.net/89VvB/5/

Обратите внимание, что я должен был указать высоту и ширину <div> так появится изображение.

Вы также можете увидеть это: border-radius fails under safari (ugly clipping)

источник

2013-09-25 15:43:44 jbaum012

К сожалению, размер может измениться и не известен - (результаты facebook api). – Wesley

No. К сожалению, это известная ошибка в старых версиях сафари. (На самом деле это происходит и в других старых браузерах, но затронутые версии имеют несоизмеримые версии)

Браузер рисует переднее изображение перед границей. Нет никакого способа обойти это.

Единственные решения:

Для переключения с помощью изображение переднего плана на фоновое изображение. Это работает, но это боль от семантического угла и может вызвать собственные проблемы.
Поместите img тег внутри div, и положить границу на div вместо того, чтобы непосредственно на img. Это связано с дополнительной разметкой, но, вероятно, это самый надежный способ ее устранения. Обратите внимание, что вам, вероятно, нужно будет установить div в display:inline-block, чтобы он сжимался, чтобы соответствовать размеру изображения.
Или, конечно же, вы можете просто отредактировать свое изображение вручную; дайте ему закругленные углы и границу с помощью Photoshop (или Gimp или любой другой инструмент, который вы используете), и вам совсем не понадобится CSS. Это немного решение для старой школы, но он вполне определенно работает.

источник

2013-09-25 16:09:13 Spudley

Я попробовал второе решение, но даже это не работает. Я получаю тот же результат. Я не уверен, почему это так, потому что я переполнял скрытый: http://jsfiddle.net/89VvB/12/ – Wesley

Хм, ну ладно. Второе решение использовалось для работы с некоторыми другими браузерами, у которых были похожие ошибки. – Spudley

Похож канавы границы и используя -webkit-бокс-тень вместо ответа:

http://jsfiddle.net/2QyY3/40/

-webkit-box-shadow:0 0 0 5px black;

Конечно, я делать это только в браузерах, как Safari 6 или ранее.

источник

2013-09-26 15:31:33 Wesley

Закругленные углы перекрытия

ответ

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