градиентов 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. 31% — Supported»>. Поддерживается
    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.
    6. 16.2 — TP: Поддерживается
    Firefox
    1. 2 — 3,5: не поддерживается
    2. 3,6 — 15: частичная поддержка
    3. 13% — Partial support»> 16 — 35: частичная поддержка
    4. 36: 105: Поддержка

      5. 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
    6. 12,1 — 90:
    7. .0014
      1. 15% — Not supported»> 5,5 — 9: не поддерживается
      2. 10: Поддерживается
      3. 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. 00% — Not supported»> 10 — 11: не поддерживается
    2. 11,1 — 11,5: частичная поддержка
    3. 12: поддержка
    4. 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:
      4. .0015
      Firefox for Android
      1. 30% — Supported»> 106: Supported
      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.
      No related posts.