Как использовать CSS3 Radial Gradient с примером

  1. Многоцветный градиент
  2. Как использовать CSS3 Radial Gradient?
  3. Укажите Размер
  4. Заключение

В предыдущей статье CSS3 Градиентная техника о CSS3-градиенте мы узнали основы техники градиента в CSS. В этой статье мы продолжим и узнаем больше о градиенте CSS3 и особенно о радиальном градиенте CSS3. Если вы обратились непосредственно к этой части руководства, мы рекомендуем вам взглянуть на первую часть статьи, а не на эту часть.

Многоцветный градиент

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

[codepen_embed height = ”266 ″ theme_id =” 0 ″ slug_hash = ”jqxBYv” default_tab = ”result” user = ”Hujjat”] См. перо <a href = 'http: //codepen.io/Hujjat/pen/jqxBYv/ '> практикующий многоцветный градиент </a> Худжат Назари (<a href='http://codepen.io/Hujjat'> @Hujjat </a>) в <a href =' http: //codepen.io «> CodePen </a>. [/ codepen_embed]

Если вы используете цвет rgba, вы также можете указать непрозрачность. например

фон: линейный градиент (справа, rgba (255,0,0,0), rgba (255,0,0,1));

Да, это было все об основах линейного градиента. Теперь давайте изучим радиальный градиент.

Теперь давайте изучим радиальный градиент

CSS3 радиальный градиент

Как использовать CSS3 Radial Gradient?

CSS3 радиальный градиент похож на круг. Это начинается от центра и заканчивается к границам. Вы можете считать центр точкой 0%, а границу - точкой 100%.

Вы можете считать центр точкой 0%, а границу - точкой 100%

пример радиального градиента

радиальный градиент css3

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

.gradient {background-image: радиальный градиент (круг, красный, синий); }

Как и линейный градиент, вы можете добавить больше аргументов и больше цветов.

[codepen_embed height = ”266 ″ theme_id =” 0 ″ slug_hash = ”pyVeQG” default_tab = ”result” user = ”Hujjat”] См. перо <a href = 'http: //codepen.io/Hujjat/pen/pyVeQG/ '> практикующий радиальный градиент </a> Худжат Назари (<a href='http://codepen.io/Hujjat'> @Hujjat </a>) на <a href =' http: //codepen.io ' > CodePen </a>. [/ codepen_embed]

Укажите Размер

В приведенном выше примере окружность градиента находится за пределами поля 300px. Вы можете указать значение размера, чтобы оно поместилось на контейнере. У нас есть разные значения размера. Вот список.

  • ближайшая сторона
  • дальняя сторона
  • Ближайший-уголок
  • самый дальний угол,

Вы можете написать им список этого

фон: радиально-градиентный (круг ближайшей стороны, красный, синий, зеленый);

Наконец, если вы хотите использовать CSS3-градиент в производственных проектах, убедитесь, что вы пишете префиксы. Вот пример для всех основных браузеров поддержки.

.technig-Gradient {фон: красный; / * Для браузеров, которые не поддерживают градиенты * / background: -webkit-radial-градиент (круг, красный, желтый, зеленый); / * Safari * / background: -o-радиальный градиент (круг, красный, желтый, зеленый); / * Опера с 11,6 до 12,0 * / background: -moz-radial-Gradient (круг, красный, желтый, зеленый); / * Firefox от 3,6 до 15 * / фон: радиальный градиент (круг, красный, желтый, зеленый); / * Стандартный синтаксис * /}

Заключение

Есть много, чтобы узнать о CSS3 градиентах, вы можете искать в w3schools для большей поддержки аргументов. Мы надеемся, что это было полезно для вас. Если у вас есть какие-либо вопросы, связанные с CSS3, не стесняйтесь комментировать ниже. 🙂