CSS3 градиент для границ блока / Хабр

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

В конечном варианте у нас получится кнопка, которая на скриншоте выше.

Работать мы будем с такой вёрсткой:

<html>
<body>
    <a href="http://google.com" class="magicButton">I am a button!</a>
</body>
</html>

Сначала зададим простую стилизацию для кнопки

.magicButton
{
    color: #444;
    font: bold 16px arial;
    background: #e4e4e4;
    border: 1px solid transparent; /* граница будущего градента */
    border-radius: 3px;
    padding: 8px 12px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);
}

Затем приступаем, собственно, к хаку.

Для того чтобы создать градиент на месте нашей границы нам понадобится в первую очередь его расположить там (background-origin: border-box;), а затем обрезать чтобы он находился точно в этом месте (background-clip: border-box;).
Основная часть готова, теперь осталось лишь прописать наш градиент. В данном примере я использую градиент в светло-серых тонах, если вы используете кнопку не на светлом фоне, то цвета градиента надо будет соответственно изменить.

linear-gradient(#e4e4e4, #ccc);

Но после установки градиента появляется проблема в том что залито так же и весь фон кнопки. Для этого мы наложим ещё один градиент, только на этот раз расположим и обрежем его в пределах padding-box.

И в тоге получим вот такую кнопку: jsfiddle.net/CyberAP/DzHUj

Минусы данного приёма:

Нельзя использовать полупрозрачный градиент для основного фона, произойдёт наложение. Зато прозрачную обводку делать вполне возможно.
Есть проблема с border-radius, при значении более 3px по краям градиент начинает заметно обрезаться. Пока что не нашёл решения.

Но есть и плюсы:

Никаких изображений и лишнего трафика.
Можно ставить какой угодно градиент для обводки, даже радиальный, их комбиниорвать.
Работает с любой шириной границы.