Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Border градиент в css

border-top with linear gradient?

CSS Tricks has a great article about gradient borders:

https://css-tricks.com/examples/GradientBorder/

As to only having it show on border top, you would need to make sure all the other sides of the border are set to 0.

-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%; border-bottom: 0; border-right: 0; border-left: 0;

Top border with gradient using css

Try this, its also cross browser ready. So not so much work for you to do.

http://jsfiddle.net/cornelas/aKhjk/6/

.bordertest { height:300px; width:300px; border-top:30px solid #c4268c; /** Created at http://www.colorzilla.com/gradient-editor/ **/ background: rgb(196,38,140); /* Old browsers */ background: -moz-linear-gradient(top, rgba(196,38,140,1) 0%, rgba(154,11,114,1) 5%, rgba(0,0,0,1) 10%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,38,140,1)), color-stop(5%,rgba(154,11,114,1)), color-stop(10%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* IE10+ */ background: linear-gradient(to bottom, rgba(196,38,140,1) 0%,rgba(154,11,114,1) 5%,rgba(0,0,0,1) 10%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4268c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ }

Градиенты

Градиенты описываются внутри CSS-свойства background-image или background. Простейший градиент можно описать таким образом:

background-image: linear-gradient(параметры); background: radial-gradient(параметры)

Линейный градиент

Сам градиент создаётся функцией linear-gradient, в параметрах которой указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество.

Направления градиента задаются с помощью ключевых слов: top, bottom, left, right.

Направление градиента располагается перед списком цветов и включает в себя частицу to. Она была добавлена в синтаксис для улучшения читабельности и наглядности:

background: linear-gradient(to right, yellow, green);

И сразу понятно, что это: «Жёлто-зелёный градиент слева направо».

Вот примеры разных направлений градиента c цветами yellow, green:

to right to left to bottom to top

Градиенты можно направлять по диагонали, из угла в угол. Для этого нужно комбинировать top, bottom и left, right. Например, градиент, идущий из левого нижнего в правый верхний угол:

background-image: linear-gradient(to right top, yellow, green);

Вот примеры диагональных градиентов c цветами yellow, green:

to right top to right bottom to left bottom to left top

Направление линейного градиента можно задавать и в виде произвольного угла, например, 245°. Направление в градусах задаётся с помощью единицы измерения deg. Можно задавать положительные и отрицательные углы. Примеры:

background-image: linear-gradient(90deg, yellow, green); background-image: linear-gradient(-135deg, yellow, green);

Углы градиента отсчитываются так:

0deg соответствует 12 часам, а отсчёт угла идет по часовой стрелке. В случае, если угол задан отрицательным значением, например, -90deg, то он отсчитывается против часовой стрелки.

Иногда градиенты с направлениями, заданными с помощью градусов и диагоналей, выглядят одинаково.

to right top 45deg

Однако их поведение отличается. Градиенты, заданные с помощью градусов, не зависят от формы контейнера, а диагональные градиенты зависят. Диагональные градиенты всегда остаются привязанными к своим углам.

Конечно, если контейнеры квадратные, то отличий не видно.

В линейный градиент можно включать больше двух цветов. Для этого цвета просто перечисляются через запятую. Например, если задать такой CSS:

linear-gradient(to right, red, yellow, green)

То получится равномерный градиент c тремя цветами.

По умолчанию цвета в градиентах распределяются равномерно, в одинаковых пропорциях, но этим поведением можно управлять. Делается это с помощью так называемых колорстопов, которые записываются сразу после значений цветов, например, red 0%, yellow 100%.

Колорстоп указывает положение цвета в градиенте, его можно задавать в процентах, пикселях и других единицах. Давайте рассмотрим несколько примеров, чтобы понять поведение колорстопов:

yellow, green yellow 0%, green 100% yellow 0%, green 50% yellow 50%, green 100% yellow 25%, green 75% red, yellow, green red 0%, yellow 50%, green 100% red 33%, yellow 66%, green 100%

Колорстоп задаёт то место, где будет располагаться центральная (самая насыщенная) часть цвета.

Позиция цвета (или колорстоп) задаёт расположение центральной части цвета, ту точку, от которой начинается переход в другой цвет.

А что будет, если задать для соседних цветов одну и ту же позицию? В этом случае получится резкий переход цветов, так как они оба будут «вытекать» из одной точки в противоположных направлениях.

Легче продемонстрировать это поведение на примере:

yellow 25%, green 75% yellow 45%, green 55% yellow 49%, green 51% yellow 50%, green 50%

Этот приём часто используют для создания интересных эффектов.

Градиентные рамки

Зададим элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.

.card1 { border: 5px solid transparent; border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d); border-image-slice: 1; width: 8rem; padding: 5rem 2rem; margin: 5rem auto; font-size: 100px;

See the Pen CSS Border Gradient Demo by Envato Tuts+ (@tutsplus) on CodePen.

Этот подход не позволит добавить border-radius. Давайте рассмотрим другой способ.

Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас).

Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div. Далее добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.

Наконец, применяем background-clip к родителю со значением padding-box. Так div будет залит до края рамки, но не далее.

See the Pen CSS Border Gradient Demo, With `border-radius` by Envato Tuts+ (@tutsplus) on CodePen.

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

Различные варианты.

background: radial-gradient(#fdbb2d, #22c1c3); background: radial-gradient(circle, #fdbb2d, #22c1c3); background: radial-gradient(circle at top left, #fdbb2d, #22c1c3); background: radial-gradient(ellipse at center, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 52%,rgba(6,109,171,1) 100%);

Сначала задаётся тип окружности (ellipse, ellipse cover), его положение (в нашем случае в центре). После этого следует синтаксис, как в линейных градиентах.

Дополнительные материалы

uiGradients - Beautiful colored gradients

Gradient CSS Generator | CSSmatic

Можно ли задать цвет градиента для свойства border-bottom?

Можно ли добавить цвет градиента в свойство border-bottom элементов блока html?

Граница должна быть чем-то подобным -

Может ли кто-нибудь сказать мне, что это возможно в CSS3?

Я пробовал это так, но не мог заставить его работать.

.border-gradient { border-bottom: 8px solid; -moz-border-image: -moz-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); -webkit-border-image: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,7,52,1)), color-stop(12%, rgba(134,29,84,1)), color-stop(47%, rgba(255,93,177,1)), color-stop(100%, rgba(83,0,30,1))); -webkit-border-image: -webkit-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); -o-border-image: -o-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); border-image: linear-gradient(to right, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); }