Градиенты CSS3 и продвижение радиуса границы к посторонним знаниям в WebKit

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

В основном, если Вы даете элементу цвет фона и применяете радиус границы к нему, 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, вот снимок экрана: (Проверьте, 'продолжают читать' кнопку), Ugly Button
(источник: friendlygp.com)

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

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

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

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

5
задан Glorfindel 22 July 2019 в 19:11
поделиться

1 ответ

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

3
ответ дан 18 December 2019 в 06:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: