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

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

Поиск

?

CSS-градиенты

— CR

  • Глобальное использование
    94,48% + 4,08% знак равно 98,56%

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

Хром
  1. 4 — 9: Частичная поддержка
  2. 10 — 25: Поддерживается
  3. 26 — 106: Поддерживается
  4. 107: Поддерживается
  5. 108 — 110: поддержан
Edge
  1. 12–105: поддержание
    1. Safari
      1. 3.1 — 3.2: не поддерживается
      2. 4 — 5: частичная поддержка
      3. 5.1 — 6: частичная поддержка
      4. 6.1 — 15.3: частичная поддержка
      5. 15.4 — 16.0: Подподдерживающаяся
      6. 9001: 3 9001:15 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 3 9001: 15.
      7. 16.2 — TP: Поддерживается
      Firefox
      1. 2 — 3,5: не поддерживается
      2. 3,6 — 15: частичная поддержка
      3. 36: 105: Поддержка
      4. 106:
      5. 36 — 105: 70066. 107 — 108: поддержан
      Opera
      1. 9 — 11: не поддерживается
      2. 11,1 — 11,5: частичная поддержка
      3. 11,6 — 12: Поддержанный
      4. 12,1 — 90: 70015
      5. 12,1 — 90:
      6. .0014
        1. 10: Поддерживается
        2. 11: Поддерживается
        Chrome для Android
        1. 106: поддерживается
        SAFARI на IOS
          1115
      . 6.1: Частичная поддержка
    2. 7 — 15,3: Частичная поддержка
    3. 15,4 — 16,0: Поддержано
    4. 16,1: Поддержано
    Samsung Internet
    1. 4 — 17,0: поддержал
    2. 18.0: Поддержал
    3. 4 — 17,0032
      Opera Mini
      1. ALL: не поддерживается
      Opera Mobile
      1. 11,1 — 11,5: частичная поддержка
      2. 12: поддержка
      3. 8 1281: 100100.10015.1001515151515115.10015151515.10015.10015.10015.10015.10015.10015.10015.10015.13888888813:5:
        UC Browser для Android
        1. 13,4: Поддерживается
        Browser Android
        1. 2,1 — 3: Частичная поддержка
        2. 4 — 4,3: поддержанный
        3. 4.4 — 4.4.4: Поддержка
        4. 9001:
        5. .0015
        Firefox for Android
        1. QQ Browser
          1. 13.1: Supported
          Baidu Browser
          1. 13.18: Supported
          KaiOS Browser
          1. 2.5: Supported

          Syntax used браузерами с префиксной поддержкой может быть несовместима с соответствующей поддержкой.

          Поддержка может быть частично эмулирована в более старых версиях IE с использованием нестандартного «градиентного» фильтра.

          Firefox 10+, Opera 11.6+, Chrome 26+ и IE10+ также поддерживают новый синтаксис «to (side)».

          Resources:
          Tool to emulate support in IE
          WebPlatform Docs
          Cross-browser editor
          Sub-features:
          CSS Repeating Gradients
          CSS Conical Gradients

          Gradient — Chakra UI

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

          • bgGradient : сокращенная, удобная поддержка стиля для применения с учетом темы градиенты.
          • bgClip : сокращение для атрибута background-clip CSS. Полезно, когда создание текстовых градиентов.
          • backgroundClip : типичный CSS-атрибут background-clip
            . Полезно, когда создание текстовых градиентов.

          Background Gradient API#

          Чтобы добавить градиент к элементу, передайте bgGradient prop и установите его значение следуя API:

          • linear(<направление>, <от>, <до>)
          • радиальный(<от>, <до>)

          Вы также можете использовать другие типы градиентов CSS, такие как повторяющийся линейный , конический и т. д. (например, to top ) или сокращенный эквивалент (например, to-t ).

          Вот список поддерживаемых сокращений направления и их соответствующие значения:

           

          {

          "to-t": "наверх",

          "to-tr": "наверх справа",

          "to- r": "вправо",

          "to-br": "вниз справа",

          "to-b": "вниз",

          "to-bl": "вниз слева",

          "to-l": "влево",

          "to-tl": "вверх слева"

          }

          Usage#

          Давайте создадим простой градиент из green.200 до pink.500

           

          Настройка Colors#

          Можно использовать как маркеры цвета с учетом темы, так и необработанные значения цвета CSS.

           

          Несколько точек остановки цвета#

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

           

          w='100%'

          h='200px'

          bgGradient='linear(to-r, серый.300, желтый.400, розовый.200)'

          />

          03
          03
          03

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

           

          w='100%'

          h='200px'

          bgGradient='linear(красный.100 0%, оранжевый.100 25%, желтый.100 50%)'

          />

          Text Gradient API#

          Чтобы добавить текстовый градиент, передайте bgGradient в соответствии с API и bgClip проп к текст .

           

          <Текст

          BGGradient = 'Linear (TO-L, #7928CA, #FF0080)'

          BGCLIP = 'Текст'

          FONTSIZE = '6xl'

          FONTWEUD to Chakra UI

          Отзывчивые градиенты#

          Вы можете управлять откликом градиентов, указав градиенты в различные точки останова.

           

          w='100%'

          h='200px'

          bgGradient={[

          'linear(to-tr,teal.