Как создать CSS градиентные цвета границы

Со всеми новыми функциями в CSS3 мы теперь можем создавать веб-сайты без изображений. В прошлом использование изображения было неизбежным, когда дело доходит до отображения градиентных цветов.

Сегодня это становится намного скуднее с использованием CSS3 Gradient Background. В предыдущих статьях мы показали, как использовать градиент CSS3 в качестве цвета фона в различных формах и направлениях; Линейные, эллиптические и повторяющиеся градиенты.

Но CSS3 Gradient не останавливается только для фонового использования. Знаете ли вы, что вы также можете использовать его в пределах границ? Читайте дальше, чтобы узнать, как это сделать.
Первый метод
Первый метод заключается в применении градиента CSS3 внутри псевдо-элементы, Хорошо, давайте посмотрим, как работает трюк.
Граница сверху вниз
Мы начнем с простого градиента, который распространяется сверху вниз. Для начала создайте коробку с div, как показано ниже.

HTML

CSS

.box {
ширина: 400 пикселей;
высота: 400 пикселей;
фон: #eee;
}
Чтобы сформировать градиент в границах блока, сначала установите сплошную границу в верхней и нижней части блока. Мы также создаем 2 прямоугольника с 2 Псевдо-элементs -: before и: after – и укажите ширину в том же размере, что и ширина границы поля.

Расположите прямоугольники с левой и правой стороны поля и примените линейный градиент через background-image. Вы можете увидеть, как этот трюк получается ниже:

Градиент слева направо
Теперь давайте создадим градиент, который охватывает влево и вправо способом, идентичным предыдущему примеру. Только на этот раз мы добавим рамку слева и справа, а не сверху и снизу.

Точно так же мы также используем Псевдо-элемент -: до и: после – для формирования 2 прямоугольников. Но, в отличие от предыдущего примера, теперь мы размещаем их сверху и снизу.

Диагональ Градиент Градиент
Создание диагонального градиента с помощью этого трюка, технически сложно.

Тем не менее, мы полагаемся на 2 псевдо-элементы,: before и: after и использовать линейный градиент. На этот раз, однако, мы будем использовать 2 линейных градиента в пределах Псевдо-элемент, И каждый градиент охватывает противоположность друг другу. Смотрите следующий исходный код для деталей.

Второй трюк
Второй метод заключается в использовании CSS3 border-image property. Свойство border-image в CSS3 позволяет нам заполнить границу изображением, а также CSS3 Gradient.

Браузерная поддержка для border-image довольно велика; Chrome, Internet Explorer 11, Firefox, Safari и Opera способны полностью отображать границы изображения. Однако следует отметить, что изображение границы будет работать только с прямоугольными формами или прямоугольниками.

Это означает, что добавление border-radius будет отклонять вывод изображения границы.

Ниже приведена спецификация свойства border-image:

границы изображения: <repeat|initial|inherit>;это путь, который определяет изображение, используемое на границе. Здесь мы заполним его с помощью CSS3 Gradient. Чтобы получить тот же результат, что и в предыдущих примерах, мы применяем градиент CSS3 внутри изображения рамки следующим образом.

.box {
ширина: 250 пикселей;
высота: 250 пикселей;
фон: #eee;
рамка: прозрачная 20px;
-moz-border-image: -moz-linear-Gradient (вверху, # 3acfd5 0%, # 3a4ed5 100%);
-webkit-border-image: -webkit-linear-Gradient (вверху, # 3acfd5 0%, # 3a4ed5 100%);
изображение границы: линейный градиент (снизу, # 3acfd5 0%, # 3a4ed5 100%);
border-image-slice: 1;
}
Изображение границы не будет показывать ничего, если мы не укажем ширину границы. Итак, как вы можете видеть выше, мы добавляем 20 пикселей ширины границы с прозрачным цветом границы. Затем мы устанавливаем значение theborder-imageandlinear-Gradient вместе с префиксом вендора для более ранних версий Webkit и Firefox.

Добавление границы-изображения-среза, показанного выше, установит внутренние смещения содержимого границы изображения. Это свойство требуется для отображения градиента полностью внутри окружающей области поля. Смотрите вывод ниже:

Этот метод предлагает больше гибкости для настройки градиента во всех возможных направлениях; слева направо, сверху вниз, по диагонали или под углом. Ниже приведены некоторые примеры:
Слева направо градиент

Диагональный градиент