После моего 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, вот снимок экрана: (Проверьте, 'продолжают читать' кнопку),
(источник: friendlygp.com)
Вы заметите, что в Safari/Chrome (последние доступные общедоступные загрузки, а также последний nightlies насколько я могу сказать), Вы получаете довольно ужасный выход за край цвета фона. Однако в Firefox, необходимо смочь видеть то, что я после. Если Вы находитесь в Internet Explorer, горе случаются с Вами.
Кто-либо знает о технике, которая позволит мне производить 'корректный' эффект? Есть ли Свойство CSS, которое я пропустил, который говорит WebKit только иметь фон в части границы-radius'd содержания поля.
Я мог потенциально использовать изображение, но я действительно стараюсь избегать его. Естественно, поскольку мы имеем дело с CSS3, и среда постоянно изменяется, мне, возможно, просто придется 'смешать' его и вернуться к изображению.
Однако, если бы кто-либо может предложить альтернативу, я был бы очень благодарен!
Это, к сожалению, известная ошибка . Вы можете обойти это, придав своему элементу рамку фонового цвета, достаточно большую, чтобы покрыть просачивающуюся внутреннюю тень, но это далеко не идеальное решение.