Градиент кривой Безье в html5 / css3

18

Не похоже, что он может выполнять градиент css3 с нелинейным (например, безье); кто-нибудь знает, возможно ли это в холсте html5?

    
задан stephenwil 19.07.2012 в 00:03
источник
  • Единственный нелинейный тип градиентов в CSS3 является радиальным –  Zoltan Toth 19.07.2012 в 00:08
  • Спасибо, но имел значение нелинейный и не радиальный. –  stephenwil 19.07.2012 в 00:10
  • @stephenwil Хорошо Zoltans комментирует довольно много прибил его. Это невозможно (хотя: вы можете комбинировать несколько фонов для достижения эффекта нелинейного градиента). –  Rob W 19.07.2012 в 00:12
  • Хорошо спасибо за ответы –  stephenwil 19.07.2012 в 00:22
  • Я знаю, что это было какое-то время, но в настоящее время в дополнение к линейному и радиальному существуют также спецификации для конических градиентов. –  Chris Ruppel 16.05.2017 в 07:48

1 ответ

14

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

Чтобы обратиться к первому: нет, к сожалению, в настоящее время нет возможности выполнять нелинейные заполнения градиента CSS. Тем не менее, вы можете использовать последовательные остановки цвета для достижения определенного уровня контроля над формой вашего градиента.

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

Прекращение цвета можно использовать довольно творчески, особенно в сочетании с background-size . Вот огромная коллекция шаблонов CSS , построенная с использованием градиентов.

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

    
ответ дан Chris Ruppel 10.11.2012 в 08:31