Border image linear gradient

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

Но CSS3 Gradient может использоваться не только для фона. Знаете ли вы, что вы можете также использовать его для рамки? Прочитайте эту статью, чтобы узнать, как это делается.

Первый способ

Первый способ — это применение CSS3 Gradient внутри псевдо-элементов. Что ж, давайте посмотрим, как это работает.

Градиент рамки сверху вниз

Мы начнем с простого градиента, который имеет направление сверху вниз. Для начала создайте блок элемента div следующим образом.

Для создания градиента в границах блока, сначала установите однотонную границу по верхнему и нижнему краю блока. Мы также создаем два прямоугольника с 2 псевдо-элементами — before и :after — и указываем их ширину с теми же размерами, что и ширина границы блока.

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

Градиент рамки слева направо

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

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

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

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

Читайте также:  Элемент пельтье на схеме

Второй способ

Второй способ заключается в использовании свойства CSS3 border-image . Свойство CSS3 border-image позволяет нам заполнить рамку изображением, а также градиентом CSS3 . Большинство браузеров поддерживают border-image : Chrome, Internet Explorer 11, Firefox, Safari и Opera нормально выводят border-image .

Однако следует отметить, что border-image будет работать только для прямоугольных фигур или блоков. Это означает, что добавление border-radius будет отменять вывод border-image .

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

это путь, который задает изображение, используемое в рамке. При этом мы заполним его с помощью CSS3 Gradient . Для достижения такого же вида, что и в предыдущих примерах, мы применяем CSS3 Gradient в пределах border-image следующим образом:

border-image не выведет ничего, если мы не зададим ширину рамки. Так что, как вы можете видеть выше, мы добавляем ширину рамки 20 пикселей с прозрачным цветом. Затем мы устанавливаем значение для border-image и linear-gradient вместе с вендорными префиксами для ранних версий Webkit и Firefox .

Добавление border-image-slice устанавливает внутреннее смещение содержимого image-border . Это свойство необходимо для отображения градиента полностью по всему блоку. Смотрите приведенный ниже пример:

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


вот мне нужен такой градиент, а получился такой , как сделать нормальный квадрат вокруг цифры в градиетне

  • Вопрос задан 11 мар.
  • 92 просмотра

Как-то так:
border-image: linear-gradient( 90deg, rgb(211,0,169) 0%, rgb(255,0,60) 100%);
border-image-slice: 1;

Easily manage projects with monday.com

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.
Читайте также:  Victoria hdd проверка жесткого диска

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.

Comments

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’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: 100%; ) while Chrome 71 and Opera cascades the previously declared value into the shorthand (which gives border-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 “Styles” and “Computed” 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 “survive” this overriding.

As a side note, I disagree that border-image (as well as its longhand sub-properties) is “obtuse”. It’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’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.

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

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

Adblock detector