Я пытаюсь правильно разобраться с градиентами CSS3 (в частности, с радиальными), и при этом я думаю, что поставил перед собой относительно сложную задачу.
В Adobe Illustrator я создал следующий стиль «кнопки».
Чтобы создать это изображение, я создал прямоугольник с фоновым цветом rgb(63,64,63) или #3F403F, а затем «стилизовал» его, чтобы он имел радиус границы 15 пикселей.
Затем я применил к нему «внутреннее свечение» с непрозрачностью 25%, размытием 8 пикселей, белым от центра. Наконец, я применил к нему белую обводку размером 3pt. (Я говорю вам все это на случай, если вы захотите воспроизвести это, если изображения выше недостаточно.)
Итак, мой вопрос таков:
Можно ли воссоздать эту кнопку с помощью CSS без изображения?
Я знаю об «ограничениях» Internet Explorer (и ради этого эксперимента я не мог дать обезьянам). Я также знаю о небольшой «ошибке» в 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;
border: 3px solid rgb(255,255,255);
background: rgb(98,99,100);
background: -moz-radial-gradient(
50% 50%,
farthest-side,
#626364,
#545454
);
background: -webkit-gradient(
radial,
50% 50%,
1px,
50% 50%,
5px,
from(rgb(98,99,100)),
to(rgb(84,84,84))
);
}
В принципе ужасно. Любые подсказки или подсказки с благодарностью принимаются и заранее большое спасибо за них!
