Как сделать градиент обводку css

Gradient Borders in CSS

Take your JavaScript to the next level at Frontend Masters.

Let’s say you need a gradient border around an element. My mind goes like this:

  • There is no simple obvious CSS API for this.
  • I’ll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it.

Perhaps like this:

If you hate the idea of a wrapping element, you could use a pseudo-element, as long as a negative z-index value is OK (it wouldn’t be if there was much nesting going on with parent elements with their own backgrounds).

Here’s a Stephen Shaw example of that, tackling border-radius in the process:

You could even place individual sides as skinny pseudo-element rectangles if you didn’t need all four sides.

But don’t totally forget about border-image , perhaps the most obtuse CSS property of all time. You can use it to get gradient borders even on individual sides:

Using both border-image and border-image-slice is probably the easiest possible syntax for a gradient border, it’s just incompatible with border-radius , unfortunately.

Frontend Masters logo

Wanna learn CSS from a course?

Frontend Masters has a full CSS learning path with multiple courses depending on how you want to approach it. There is an in-depth course covering all of CSS, a Sass-specific course, a course on modern layouts, and a course on SMACSS, a approach to CSS architecture.

Frontend Masters logo

Wanna learn CSS from a course?

Frontend Masters has a full CSS learning path with multiple courses depending on how you want to approach it. There is an in-depth course covering all of CSS, a Sass-specific course, a course on modern layouts, and a course on SMACSS, a approach to CSS architecture.


These are all great solutions, but I really hope in the near future linear-gradient on borders will be a reality. Would really help when making CSS graphics.

Yes, it was intended that you could use linear-gradient and border-image together. If you need rounded borders too, you should be able to do that with SVG and border image. I’ve successfully done that before without distorting the corners or anything. Let me know if you want me to post an example.

I’m sure everyone would enjoy having a demo like that to reference, including me!

When we were designing how border-image should work (many years ago), the thought was that the image would contain whatever rounded or fancy corners you wanted, and border-radius would only be used as a fallback, not as something that further clipped the corners.

yep i agree I would of done the same thing as well.

Wasn’t working for me on Firefox 64 until I changed the border-image to border-image-source as border-image-slice: 1 was being overridden in the cascade.

Funnily enough, browser support seems to be inconsistent for the last example. When border-image-slice is declared in advance and there&#8217;s no value for slice set in the border-image shorthand, as in the example above, Firefox 64 and Safari on iOS 12 uses the default slice value (which is 100%, resulting in border-image: <image> 100%; ) while Chrome 71 and Opera cascades the previously declared value into the shorthand (which gives border-image: <image> 1; ).

Shorthands do normally reset the longhands to their initial values when left out, so I don’t know why Chrome and Opera wouldn’t. The last example seems to be fixed in iOS12 by changing border-image to border-image-source in those two classes.

Looks much like a Chromium bug in the cascade. Interestingly, Chrome DevTools in both &#8220;Styles&#8221; and &#8220;Computed&#8221; tabs displays the value 1 of border-image-slice struck-through, and Computed styles tab shows the value 100% coming from the shorthand declaration as overriding it — as it should be — but the value 1 appears to somehow mysteriously &#8220;survive&#8221; this overriding.

As a side note, I disagree that border-image (as well as its longhand sub-properties) is &#8220;obtuse&#8221;. It&#8217;s arguably the most misunderstood CSS properties of all time, and maybe significantly underrated, especially in combination with SVG images. Some of its abilities like 9-slice scaling and — especially — painting things outside the element&#8217;s box (via border-image-outset ) are unique in CSS, and can provide much shorter and cleaner solutions to many cases that otherwise would require hacking around pseudo-elements or even extra markup.

Not sure about the last two. I’m getting different results in iOS Safari. I’d give it a look.

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

Чтобы применить градиент к границе, наиболее простой подход — использовать свойство border-image (аналогично тому, как это делается с фоновыми градиентами):

‘1’ после объявления linear-gradient — это значение границы изображения-фрагмента. Используя 1, мы указываем, что нам нужна единственная граничная область.

Обратной стороной этого подхода является то, что вы не можете комбинировать изображение границы с радиусом границы. &#x1f937;

Альтернативный подход

Существует альтернативный подход, основанный на свойстве background-clip , который совместим со свойством border-radius .

Значения padding-box и border-box , указанные после линейных градиентов, представляют значения background-clip .

Первый линейный градиент ограничен рамкой заполнения (т. e. Всем содержимым элемента, кроме границ). Это «поддельный» градиент, потому что мы используем один и тот же цвет дважды; мы используем его, чтобы замаскировать второй фоновый градиент цветом фона.

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

Наконец, требуется прозрачная граница, чтобы отделить рамку от поля заполнения (в противном случае они были бы идентичны, и первый градиент полностью покрывал бы второй).

Градиентная обводка блока на CSS

Создание современных сайтов сопровождается использованием анимацией, как отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только CSS?

Рассмотрим пару вариантов градиентных обводок.

1. Прямоугольная обводка с острыми углами

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.

Разметка HTML

Стили CSS


2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after

Разметка HTML

Стили CSS


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

Понравилась статья? Поделитесь

Вас может заинтересовать:

Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню.

Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS .

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

CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *