Блог

Привет, у меня возникли проблемы с проблемой в Chrome. Я думаю, что это может быть ошибка, но я не могу найти много информации об этом. По сути, я хочу применить радиус границы к изображению. Радиус границы будет составлять 50%, образуя круг. Причина, по которой я установил его как%, заключается в том, что я не буду точно знать ширину / высоту изображения.

Есть идеи, почему chrome не отображает границы корректно? Я не тестировал в FF < 4. но FF4 работает хорошо, как и IE для разнообразия

Что вы пытаетесь сделать? Вы хотите, чтобы за изображением появился круг? Это то, что я вижу в FF. В Chrome окружность обрезает края изображения.

Согласно спецификации — http://www.w3.org/TR/css3-background/#corner-clipping — содержимое должно быть усечено.

Содержимое замененных элементов всегда обрезается до кривой края содержимого.

Что, на мой взгляд, означает, что Chrome правильно следует спецификации в этом вопросе.

Webkit в настоящее время не обрезает углы изображений. Удалите src тег с изображения, и вы увидите, что граница округлена правильно.

Одним из обходных путей является то, что вы могли бы установить background-image свойство в css: http://jsfiddle.net/tEzwJ /

Я нашел способ обойти это, добавив границу и радиус границы к родительскому элементу . Затем я применил радиус границы и к изображению. Хотя есть небольшой разрыв, он работает в Chrome сейчас. Я не тестировал это в FF3.6. Но FF4 отображает тот же результат