CSS3 градиенты и радиус границы, приводящие к постороннему фону в веб-наборе

Question

После моего 1-го вопроса , касающегося градиентов CSS3, в которых я воссоздаю «внутреннее свечение», я дошел до того, что меня не очень радует способ рендеринга веб-набора эффект.

По сути, если вы присвоите элементу цвет фона и примените к нему радиус границы, webkit позволяет фону «вытекать», заполняя окружающий прямоугольник (делая его немного ужасным)

Чтобы воспроизвести нежелательный эффект, попробуйте что-то вроде следующего

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: rgb(98,99,100);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

Очевидно, что это проблема только для Windows, поэтому для тех, кто на Mac, вот скриншот: (проверьте кнопку «продолжить чтение») Гадкая кнопка http://iamfriendly.clients.friendlygp.com/files/2010/04/download.png

Вы заметите, что в Safari / Chrome (последние доступные публичные закачки, а также, насколько я могу судить, последние ночные еженедельники) вы получаете довольно уродливое размытие цвета фона. Однако в Firefox вы сможете увидеть, что мне нужно. Если вы в Internet Explorer, горе вам.

Кто-нибудь знает технику, которая позволит мне произвести «правильный» эффект? Есть ли свойство CSS, которое я пропустил, и которое говорит веб-пакету, что фон должен находиться только внутри части border-radius в поле с содержимым.

Я мог бы потенциально использовать изображение, но я действительно стараюсь его избегать. Естественно, поскольку мы имеем дело с CSS3, а ландшафт постоянно меняется, мне, возможно, придется просто «сложить» его и вернуться к изображению.

Однако, если кто-нибудь может предложить альтернативу, я был бы очень признателен!

Answer 1

Наконец, через очень долгое время, кто-то намного умнее, чем я, может найти решение:

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

твой друг:)

От: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

Answer 2

Это, к сожалению, известная ошибка . Вы можете обойти это, придав своему элементу рамку цвета фона, достаточно большую, чтобы покрыть протекающую врезку, но это далеко от идеального решения.