Как использовать 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%.

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

радиальный градиент 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, не стесняйтесь комментировать ниже. 🙂

Похожие

Комментарии