-webkit-border-radius выглядит некрасиво

#html #safari #webkit #css

#HTML #safari #webkit #css

Вопрос:

Я создаю макет лайтбокса со следующими свойствами:

 #lightbox {
  border: 0.3em solid #acaeb0;
  -webkit-border-radius: 1em;
  background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
  -webkit-box-shadow: 0 0 0.6em 0.3em #888;
}

Проблема в том, что результирующие закругленные углы выглядят очень некрасиво (с использованием safari5):

введите описание изображения здесь

Проблема в пробелах в закругленном углу. Вы знаете, как я могу избежать такого поведения?

РЕДАКТИРОВАТЬ: После добавления -webkit-background-clip: padding-box; свойства это выглядит лучше, но не идеально:

введите описание изображения здесь

Я уменьшил ширину границы, но она выглядит так же с толстыми границами. Должен ли я установить другое свойство, чтобы оно выглядело идеально?

ПРАВКА 2: Похоже, это ошибка webkit:https://bugs .webkit.org/show_bug.cgi?id=21819

1. Существует множество проблем, связанных с рендерингом border-radius в bugzilla от Webkit.

2. У переполнения стека та же проблема. Ничего не поделаешь.

3. Похоже, с тех пор ошибка была исправлена.

Ответ №1:

Это называется «фоновое кровотечение».

Для возможного исправления взгляните на этот сайт:http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed .

Как говорится, вам следует попробовать установить:

 -webkit-background-clip: padding-box;

1. хм, добавлено -webkit-background-clip: padding-box; свойство, и оно кажется лучше, но не идеально, эффект просто уменьшается. Есть ли другое свойство, которое я должен установить? Внешний вид после добавления нового свойства смотрите в моем исходном сообщении.

2. Я просто хотел поблагодарить вас … используя ваше предложение, я исправил ошибку, из-за которой браузер Android не обрезал фон окна ввода со скругленными углами. 🙂 Таким образом, ваше исправление не только предотвращает проблему в вопросе, но и некоторые вариации.

Ответ №2:

Единственным взломом, который принес мне удовлетворение в подобном случае, было обернуть коробку внутри другой: одну с фоном, вторую с рамкой, обе с одинаковым радиусом границы, но первая с прозрачной рамкой. И код выглядит следующим образом :

.fist-block {фон: черный; радиус границы: 20 пикселей; граница: сплошная прозрачная 0 пикселей;}
 
.второй блок {border-radius: 20 пикселей; граница: 1 пиксель сплошного красного цвета;}

Ответ №3:

Я сталкиваюсь с этой проблемой в Chrome при использовании границы в 1 пиксель, однако использование 2 пикселей и выше выглядит нормально. Chrome: 13.0.782.218 m