Repeating linear gradient: repeating-linear-gradient() — CSS: Cascading Style Sheets

CSS повторяющихся градиентов | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS повторяющиеся градиенты

— CR

• Глобальное использование

  98,66% + 0,01% знак равно 98,67%

Метод определения повторяющегося линейного или радиального цветового градиента в виде изображения CSS.

Chrome

1. 4 — 9: Not supported
2. 10 — 25: Supported
3. 26 — 107: Supported
4. 108: Supported
5. 109 — 111: Supported

Edge

1. 12 — 107: Supported
2. 00% — Supported»> 108: Поддерживается

Safari

1. 3.1 — 5: не поддерживается
2. 5,1 — 6: Поддерживается
3. 6,1 — 16,1: Поддержка
4. 16.2: Поддержанный
5. 16.3–3 -3 -й.0014
   1. 2 — 3.5: Not supported
   2. 3.6 — 15: Supported
   3. 16 — 106: Supported
   4. 107: Supported
   5. 108 — 109: Supported

   Opera

   1. 9 — 11: Not supported
   2. 01% — Partial support, requires this prefix to work: -o-«> 11.1 — 11.5: Partial support
   3. 11.6 — 12: Supported
   4. 12.1 — 91: Supported
   5. 92: Supported

   IE

   1. 5.5 — 9: Not supported
   2. 10: Supported
   3. 11: Supported

   Chrome для Android

   1. 108: Поддерживается

   Safari на iOS

   1. 3,2 — 4,3: не поддерживается
   2. 5 — 6,1: Поддержка
   3. 7 — 16.1: Поддержка
   4. 00% — Supported»>111111111111111111111111111111111111381111 388.

   Samsung Internet

   1. 4 — 18.0: Supported
   2. 19.0: Supported

   Opera Mini

   1. all: Not supported

   Opera Mobile

   1. 10 — 11: Not supported
   2. 11,1 — 11,5: частичная поддержка
   3. 12: Поддерживается
   4. 12,1: Поддерживается
   5. 72: поддержан

   UC Browser для Android

   1. 13.4: поддержка

7. global»>

12. 1. .
    2. 4 — 4.3: Supported
    3. 4.4 — 4.4.4: Supported
    4. 108: Supported

    Firefox for Android

    1. 107: Supported

    QQ Browser

    1. 13.1: Supported

    Браузер Baidu

    1. 13.18: Поддерживается

    Браузер KaiOS

    1. 2.5: Поддерживается

    Firefox 10+, поддерживает новый синтаксис Opera 10+, Opera+, «6» и Opera 10+, Opera 26+, 26+, Opera 26+.

    Ресурсы:

    Веб-документы MDN — повторяющийся линейный градиент CSS

    Изучение полос с повторяющимся линейным градиентом — CSS In-Depth, v2

    Этот курс может содержать ценную информацию о CSS для справки, но больше не отражает наш курс стандарты качества.

    Стенограмма урока «Полосы с повторяющимся линейным градиентом»

    [00:00:01]
    >> Эстель Вейл: Итак, в этом примере есть полосы. И именно так мы использовали чередование, прежде чем поняли, что это намного проще сделать с повторяющимися линейными градиентами. Причина, по которой это работает, заключается в том, что это ровно 135 градусов, и потому что первая четверть изображения, верхний левый угол прозрачен, а нижний правый угол прозрачен.

    [00:00:26] Итак, в основном повторяется один и тот же цвет, поэтому он помещается поверх него. Если я действительно поменяю градусы, а я не думаю, что смогу, потому что я не думаю, что это живое, 130, нет, да, это так. Вы видите, как он ломается, и вы видите, как он ломается?

    [00:00:45] Это просто в основном, потому что он точно рассчитан,
    >> Эстель Вейл: 135 градусов. Гораздо проще сделать это, сказав: «Давайте сделаем повторяющийся линейный градиент». Теперь это повторяется, и последний цвет фиолетовый. Итак, прямо здесь вы увидите, что я использую пиксели, единицы длины, а не проценты.

    [00:01:15] Теперь, если я изменю последнее на 20%,
    >> Эстель Вейл: Они будут повторяться пять раз на странице. Поскольку последняя цветовая точка, единица длины последней цветовой точки, какой бы ни была эта длина, является шириной вашего градиента. Это ваш размер градиента. Так вот, раньше у меня было 120 пикселей, поэтому ширина каждой строки цвета была 20 пикселей.

    [00:01:46] И когда он достиг отметки в 120 пикселей, он снова начал с красного цвета. Таким образом, повторяющиеся линейные градиенты имеют точно такой же синтаксис, за исключением того, что перед словом «линейный градиент» написано «повторение». Так что это повторяющийся линейный градиент вместо линейного градиента. Вы можете сделать верхний правый, верхний левый, одинаковые углы.

    [00:02:16]
    >> Эстель Вейл: 45 градусов будет то же самое, градусов, верно? И заметьте, если я скажу 0, это недействительно. Но хорошо, я думаю, это сработало, потому что это значение по умолчанию.
    >> Эстель Вейл: Итак, вернемся к углу, 135 градусов, потому что мне это нравится. Итак,
    >> Эстель Вейл: Этот градиент идет от красного к оранжевому, к желтому, к зеленому, к синему, к фиолетовому.

    [00:02:49] И последнее фиолетовое, последнее пятно — это отметка в 120 пикселей. Это означает, что мой градиент имеет ширину 120 пикселей, а затем он повторяется. Таким образом, другой градиент в основном составляет от 0 до отметки 100%, если вы не используете размер фона. Итак, если бы я на самом деле сделал размер фона,
    >> Эстель Вейл: Я не могу сделать это на этом.

    [00:03:15] Давайте скопируем это и вернемся на два слайда назад.
    >> Эстель Вейл: И поставить фоновое изображение, верно? Если бы я сделал background-size,
    >> Эстель Вейл: 120 пикселей.
    >> Эстель Вейл: точка с запятой. Я бы начал получать действительно уродливые вещи.
    >> Эстель Вейл: Если бы я сделала 240 пикселей,
    >> Эстель Вейл: Это идеально. 2400 пикселей, вот почему. 240 пикселей, это все равно некрасиво. Но это повторяется дважды в каждом градиенте.

    [00:04:02] Вы видите, как в этом поле прямо здесь, на этом фоновом изображении размер 240 на 240. Давайте просто повторим фон, не будем повторять, чтобы я мог указать на это.
    

    >> Эстель Вейл: Итак, вы видите здесь больше двух красных линий.
    >> Эстель Вейл: И причина, по которой красных линий больше двух, в том, что, по сути, есть две синие линии, есть две фиолетовые линии.

    [00:04:37] Но места немного больше, это из-за того, где проходит линия градиента. Если бы я на самом деле сделал ноль градусов, их было бы по два.
    >> Эстель Вейл: На самом деле нет, каждого больше двух. Я не знаю, о чем говорю. Давай сделаем это 90 градусов.
    >> Эстель Вейл: Хорошо, ровно два.