Как сделать бордер градиентом

Как задать градиент у border и сделать его круглым

Есть кнопка и под кнопкой есть фон(картинка), нужно сделать градиент у border и сделать его круглым, и чтобы фон(картинка) была видна.
Здесь фон непрозрачный у div .

.rounded-corners-gradient-borders

Отслеживать
6,373 5 5 золотых знаков 25 25 серебряных знаков 56 56 бронзовых знаков
задан 8 мар 2018 в 17:08
53 1 1 серебряный знак 5 5 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.rounded-corners-gradient-borders < width: 250px; padding: 15px; border-left: 2px solid #f00; border-right: 2px solid #3020ff; background-image: linear-gradient(45deg, #f00, #3020ff), linear-gradient(45deg, #f00, #3020ff); background-size: 100% 2px; background-position: 0 0, 0 100%; background-repeat: no-repeat; border-radius: 35px; text-align: center; font-weight: bold; font-family: Arial; >.img

 
Some text
 
 

Можно попробовать с box-shadow :

.box < width: 250px; margin: 2rem 0; background: transparent; border-radius: 25px; text-align: center; padding: 15px; >.gradient < box-shadow: -2px 0 0 2px rgba(255, 0, 0, 0.8), -2px -2px 0 2px rgba(48, 32, 255, 0.3), -2px 2px 0 2px rgba(48, 32, 255, 1), 0 -2px 0 2px rgba(48, 32, 255, 1), 0 2px 0 2px rgba(48, 32, 255, 1), 2px -2px 0 2px rgba(48, 32, 255, 1), 2px 2px 0 2px rgba(48, 32, 255, 1), 2px 0 0 2px rgba(255, 0, 0, 1); >img

Some text
  

Отслеживать
ответ дан 8 мар 2018 в 17:45
4,572 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
Спасибо, это очень похоже!)
9 мар 2018 в 18:48
@Maks, был рад помочь:)
9 мар 2018 в 18:51

* < box-sizing:border-box; >body < margin:0; background:linear-gradient(to right, #ddd,#cda); min-height:100vh; >.btn < display:inline-block; position:relative; padding:0 15px; text-align:center; width:200px; line-height:40px; cursor:pointer; user-select:none; font-weight:bold; >.btn__border < position:absolute; top:0; left:0; width:100%; height:100%; >.btn__border rect < fill:none; stroke:url(#gradient); stroke-width:3px; width:calc(100% - 6px); height:calc(100% - 6px); >.btn:hover rect

  
  Кнопка 
 
  Ещё кнопка 

Отслеживать
ответ дан 10 мар 2018 в 7:05
10.4k 2 2 золотых знака 15 15 серебряных знаков 36 36 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать градиентную рамку?

Градиентная рамка — это элемент веб-дизайна, который представляет собой рамку с плавным переходом от одного цвета к другому (рис. 1) или в виде штриховки (рис. 2).

Рис. 1. Рамка с плавным градиентом

Рис. 2. Рамка в виде штриховки

Для создания подобных рамок применяется несколько методов.

Использование border-image

Свойство border-image устанавливает для рамки изображение, в качестве которого может выступать, в том числе, линейный (функция linear-gradient()), радиальный (функция radial-gradient()) или повторяющийся градиент (например, repeating-linear-gradient()).

Сперва устанавливается сплошная рамка заданной толщины через свойство border:

border: 15px solid red;

Цвет рамки можно поставить произвольный, в дальнейшем он будет переопределён градиентом, который добавляется к свойству border-image. К примеру, для градиента, идущего к правому нижнему углу, от чёрного до оранжевого цвета пишем следующее:

border-image: linear-gradient(to right bottom, black, orange);

Ниже добавляем свойство border-image-slice со значением, равным толщине нашей рамки. Обратите внимание, что число пишется без указания каких-либо единиц.

border-image-slice: 15;

Код для градиента в виде штриховки показан в примере 1.

Пример 1. Свойство border-image для создания штриховки

У этого метода есть небольшой недостаток — свойство border-radius, добавляющее скруглённые уголки, для подобной рамки не работает.

Использование псевдоэлементов

Псевдоэлементы ::before и ::after позволяют создать дополнительный пустой элемент, которым можно управлять с помощью свойств позиционирования.

Сперва для всего элемента в качестве фона ставится произвольный градиент. Затем поверх элемента накладывается псевдоэлемент чуть меньшего размера с белым фоном. Он перекрывает элемент, оставляя его часть по краям, тем самым имитируя рамку. Общий принцип становится понятнее, если оставить фон полупрозрачным (рис. 3).

Рис. 3. Псевдоэлемент располагается поверх самого элемента

В примере 2 показано, как с помощью ::after создать псевдоэлемент и позиционировать его.

Пример 2. Использование ::after для создания рамки

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

Использование background

Свойство background достаточно универсально и позволяет установить несколько фонов и задать их параметры. Так что делаем два фона: один с градиентом, другой сплошной белый и накладываем их друг на друга.

Белый цвет нельзя указать в виде слова (white) или шестнадцатеричного значения (#fff), потому как за цвет фона и градиента отвечают разные свойства:

background-color: white; background-image: linear-gradient(#f19a10, #25ac5e);

Чтобы скомбинировать эти значения в одном свойстве background , белый цвет можно задать в виде градиента следующим образом:

background-image: linear-gradient(#fff, #fff);

Для каждого из двух наших фонов надо установить ещё свойство background-clip:

background-clip: padding-box /* Для белого фона, чтобы он не рисовался под рамкой */ background-clip: border-box /* Для градиента, чтобы он начинался под рамкой */

Осталось соединить все параметры фона воедино в качестве значения свойства background :

background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #f19a10, #25ac5e) border-box;

И добавить рамку желаемой толщины с прозрачным цветом:

border: 12px solid transparent;

Окончательный код показан в примере 3.

Пример 3. Градиентная рамка

См. также

• background-clip
• border
• border-image
• border-radius
• linear-gradient()
• Блочные элементы
• Градиенты в CSS
• Градиенты у
• Добавление треугольника
• Колесо для сокращённых свойств
• Круглые изображения
• Линейный градиент
• Открываем блочную модель
• Оформление кнопок
• Оформление ссылок
• Повёрнутые рамки
• Рамка вокруг изображений
• Свойство border
• Строчные элементы
• Установка фона и градиента

Градиентные границы в CSS

Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.

Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

• Для этого не существует простого и очевидного CSS API.
• Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.

Выглядеть это будет как-то так:

 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
 

body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module-border-wrap < max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; >.module

Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).

Вот пример Стивена Шоу, закрепляющий border-radius :

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.
 

.gradient-box < display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >> html < height: 100%; background: #000; display: flex; >body

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

 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
 

body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module

Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .

 
 
 I have a gradient 
 
 I have a gradient 
 
 I have a gradient 
 
 I have a gradient 
 

button < background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; >.border-gradient < border-image-slice: 1; border-width: 2px; >.border-gradient-purple < border-image: linear-gradient(to left, #743ad5, #d53a9d); >.border-gradient-green < border-image: linear-gradient(to left, #00C853, #B2FF59); >body < height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; >div < width: 100%; text-align: center; >> div > div < width: 100%; padding: 1rem; >> .on-dark < background: #222; button < color: white; >>

Делаем простым способом градиент для border на CSS, Simple Gradient Borders in CSS

Сразу приведу пару примеров, что бы могли сразу использовать… Предположим есть контейнер. Сделаем ему сверху border с градиентом на CSS:

В следующем примере border будет со всех сторон блока. Что бы в таком случае сделать градиент, понадобится немного другая конструкция CSS стилей

Можно ещё играться с направлением градиента. Например направление “to right” изменим на “to top right” и получим диагональное направление

Заметили, возле кодов цветов градиента стоят значения “0%” и “100%”? Этими цифрами можно устанавливать плавность перехода цвета к цвету, а так же смещение цветов в одну или другую сторону. Надеюсь этой информации хватит, что бы сделать любой градиент для border на чистом CSS!

Ещё статьи по теме:

• Настройка плагина Yoast SEO для WordPress
• Делаем простой слайдер сравнения двух изображений – Image Comparison Slider
• Делаем Хлебные крошки (Breadcrumb) с микроразметкой для WordPress без плагинов
• Как вставить несколько background в один div блок?
• Разбираемся в отличиях между em и rem размерами шрифтов в CSS

Оставь свой коммент

Привіт читачу! Якщо одержав тут корисну інформацію і тобі не байдуже, прошу фінансово допомогти (на їжу та обслуговування сайту). Дякую!