border-radius терпит неудачу при сафари (безобразное сокращение)

Question

Кто-нибудь знает способ обойти «ошибку» в Safari?

Когда я использую border-radius для создания закругленных границ в CSS3, он просто отлично работает в Safari, FF и т. Д.

Но когда цвет границы такой же, как на заднем плане, вы можете видеть фон контейнеров, перекрывающий границу.

Вы можете попробовать это здесь: http://de.roundedcorner.org/css3-rounded-corner-generator Просто установите цвет границы и фон сайтов на #333333

Спасибо за вашу помощь!

Answer 1

Это, скорее всего, связано с отсечением фона.

Следующее должно исправить это.

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

Чтобы узнать больше о background-clip, посмотрите здесь: https://developer.mozilla.org/en/CSS/background-clip

Answer 2

Свойство background-clip используется для определения того, распространяется ли фон на границу или нет. По умолчанию это border-box, что означает, что он расширяется, но если вы установите его в padding-box, он не будет. если вы используете поле содержимого, фон распространяется только на область содержимого. (источник: http://www.css3.info/preview/background-origin-and-background-clip/)

Решением вашей проблемы является использование: -webkit-background-clip: padding-box;

Важно отметить, что если вы используете сокращенную запись для указания других свойств фона, то их следует добавить после них. Кажется, что сокращенная запись подразумевает значение клипа по умолчанию, которое переопределяет ранее установленное значение. (источник: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed)