CSS ไล่ระดับสีแบบวงกลม CSS: การไล่ระดับสีแบบรัศมีสำหรับพื้นหลัง การไล่ระดับสีแบบเรเดียล การไล่ระดับสีแบบเรเดียล ()

ความหมายและการประยุกต์

ฟังก์ชัน CSS radial-gradient() อยู่ในตำแหน่งตามแนวรัศมี โดยขยายออกจากศูนย์กลางขององค์ประกอบเป็นรูปวงกลมหรือวงรี โดยสีของการไล่ระดับสีจะกระจายเท่าๆ กันทั่วทั้งพื้นที่ขององค์ประกอบ

หลักการสร้างการไล่ระดับสีแบบรัศมีนั้นคล้ายคลึงกับการสร้างการไล่ระดับสีเชิงเส้น (การไล่ระดับสีเชิงเส้น ()) สำหรับสิ่งนี้คุณเพียงแค่ต้องระบุสีเริ่มต้น - มันจะอยู่ตรงกลางของการไล่ระดับสีและสีสุดท้ายซึ่งจะอยู่ ที่ส่วนท้ายของการไล่ระดับสี

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับการไล่ระดับสีได้ในบทความ “” และ “” โปรดทราบว่าบทความเน้นถึงความแตกต่างของการทำงานกับเบราว์เซอร์รุ่นเก่าและมีตัวอย่างมากมาย

รองรับเบราว์เซอร์

ไวยากรณ์ซีเอสเอส:

รูปร่าง

รูปร่างเป็นวงรีถูกกำหนดโดยค่าวงรีซึ่งเป็นค่าเริ่มต้น (ไม่จำเป็นต้องระบุ) และรูปร่างวงกลมถูกกำหนดโดยค่าวงกลม

คำสำคัญ

การไล่ระดับสีจะคำนวณตามระยะทางถึง ด้านใกล้/ไกล, หรือ มุมใกล้/ไกลที่สุดองค์ประกอบ.

ขนาด

กำหนดขนาดของรูปร่างไล่ระดับสี ไม่จำเป็นต้องระบุค่าวงกลมหรือวงรี ห้ามใช้คำหลักหากระบุขนาด- หากคุณระบุ หนึ่งค่าจากนั้นเบราว์เซอร์ก็จะถือว่าเป็น - หากคุณระบุ สองความหมาย, ที่ ค่าแรกจะถือว่าเบราว์เซอร์เป็น รัศมีแนวนอน, ก ความหมายที่สองยังไง รัศมีแนวตั้งสำหรับองค์ประกอบวงรี .

ฉันดึงความสนใจของคุณไปที่ความจริงที่ว่า คุณไม่ได้รับอนุญาตให้ใช้ค่าเปอร์เซ็นต์หากคุณระบุเพียงค่าเดียว(รัศมีของธาตุกลม) เมื่อใช้ สองความหมาย(สำหรับการไล่ระดับสีแบบวงรี) อนุญาตให้ระบุค่าเหล่านี้เป็นเปอร์เซ็นต์ได้

ตำแหน่ง

ตำแหน่งเริ่มต้นของการไล่ระดับสีในแนวรัศมีถูกกำหนดโดยคีย์เวิร์ด -center แต่สามารถเปลี่ยนแปลงได้โดยใช้ หน่วยความยาว(ตัวอย่างเช่น: พิกเซลหรือ em), ค่าเปอร์เซ็นต์และ คำหลักซึ่งใช้ใน คุณสมบัติซีเอสเอส background-position มีหน้าที่รับผิดชอบตำแหน่ง (ตำแหน่ง) ของภาพพื้นหลัง

ความหมาย	คำอธิบาย
ด้านบนซ้าย ตรงกลางด้านซ้าย ด้านล่างซ้าย ด้านบนขวา ตรงกลางด้านขวา ด้านล่างขวา ตรงกลางด้านบน ศูนย์ศูนย์ ตรงกลางด้านล่าง	กำหนดตำแหน่งของภาพ ค่าแรกคือตำแหน่งแนวนอน และค่าที่สองคือตำแหน่งแนวตั้ง หากระบุเพียงอันเดียว คำหลักอีกค่าหนึ่งจะเป็น "กึ่งกลาง"
x%y%	0% 0% (นี่คือค่าเริ่มต้น- ที่มุมขวาล่าง 100% 100%. หากระบุเพียงค่าเดียว ค่าอื่นก็จะเป็น 50%.
xy	กำหนดตำแหน่งของภาพ ค่าแรกคือตำแหน่งแนวนอน และค่าที่สองคือตำแหน่งแนวตั้ง มุมซ้ายบนก็มี 0 0. ค่าอาจเป็นพิกเซลหรือหน่วย CSS อื่นๆ หากระบุเพียงค่าเดียว ค่าอื่นก็จะเป็น 50%. คุณสามารถแบ่งปัน ความสนใจและ หน่วยวัด

สี

อนุญาตให้ใช้ไม่เพียง แต่ "สีที่กำหนดไว้ล่วงหน้า" เท่านั้น แต่ยังรวมถึง "" - เลขฐานสิบหก (ฐานสิบหก) ค่าสี RGB/-A และ HSL/-A .

หยุด

ค่านิยม จุดหยุด (สีหยุด ) ระบุไว้ใน หน่วยความยาว(ตัวอย่างเช่น - พิกเซลหรือ em) และใน ค่าเปอร์เซ็นต์ - เบรกพอยต์บอกเบราว์เซอร์ว่าการไล่ระดับสีในแนวรัศมีควรไปถึง สีที่ระบุถึง ตั้งค่าและเลื่อนไปยังสีถัดไปอย่างราบรื่นหากมี

ตัวอย่างการใช้งาน

ลองดูการไล่ระดับสีในแนวรัศมีของรูปร่างทรงกลมและทรงรี แล้วดูว่ามีความแตกต่างกันอย่างไรในตัวอย่างการใช้งานจริงต่อไปนี้:

ในตัวอย่างนี้ เราสร้างบล็อกสี่บล็อกและให้การไล่ระดับสีแบบรัศมี บล็อคบนก็มี รูปร่างรูปไข่และบล็อกล่าง ทรงกลม.

ลองดูตัวอย่างการวางตำแหน่งการไล่ระดับสีในแนวรัศมี

ในตัวอย่างนี้เราสร้างขึ้น หกช่วงตึกด้วยรูปทรงการไล่ระดับสีที่แตกต่างกัน (แบบวงกลมและแบบวงรี) และการวางตำแหน่งการไล่ระดับสีสำหรับแต่ละบล็อกแตกต่างกันโดยระบุค่าใน พิกเซล, เปอร์เซ็นต์และใช้ คำหลัก.

โปรดทราบว่าหากการไล่ระดับสีแบบรัศมีถูกวางตำแหน่งไว้ที่ศูนย์กลางตามค่าเริ่มต้น และองค์ประกอบนั้นมีรูปร่างเป็นสี่เหลี่ยมจัตุรัส คุณจะไม่เห็นความแตกต่างระหว่างการไล่ระดับสีแบบวงกลมและการไล่ระดับสีแบบวงรี

ลองดูตัวอย่างการใช้จุดหยุดการไล่ระดับสีในแนวรัศมี:

ในตัวอย่างนี้เราสร้างขึ้น หกช่วงตึก: สาม บล็อกบน แตกต่างจาก สามอันล่างโดยเท่านั้น รูปร่างไล่ระดับสี, ประเด็นสำคัญก็เหมือนกัน:

• บล็อกแรกและบล็อกที่สี่ – การไล่ระดับสีสองสี สีแดงซึ่งกลายเป็นได้อย่างราบรื่น สีเขียวโดยครอบครองส่วนที่เหลือขององค์ประกอบ
• บล็อกที่สองและห้า – การไล่ระดับสีสามสีซึ่ง 10% ของศูนย์ถูกครอบครอง สีแดงซึ่งกลายเป็นได้อย่างราบรื่น สีเขียวโดยมีจุดหยุดที่ 50% จะเปลี่ยนไปสู่ได้อย่างราบรื่น สีฟ้าซึ่งรับเอาองค์ประกอบที่เหลือ
• บล็อกที่สามและหก – การไล่ระดับสีสามสีซึ่ง 50% ของศูนย์ถูกครอบครอง สีแดงซึ่งกลายเป็นได้อย่างราบรื่น สีเขียวโดยมีจุดหยุดอยู่ที่ 85% จึงสามารถเปลี่ยนผ่านได้อย่างราบรื่น สีฟ้าซึ่งกินพื้นที่ส่วนเล็กๆ ที่เหลือทั้งหมดขององค์ประกอบ

มาดูวิธีการควบคุมขนาดของการไล่ระดับสีแบบรัศมีใน CSS

ในตัวอย่างนี้ เราสร้างสามช่วงตึก:

บล็อคแรก- เราระบุไว้ หนึ่งค่า 50px ซึ่งเบราว์เซอร์ตีความว่าเป็น รัศมีสำหรับการไล่ระดับสีแบบวงกลม- ระบุไว้สำหรับการไล่ระดับสี 7สี. สังเกตว่าสีด้านนอกสุดจะเต็มพื้นที่ที่เหลือ

บล็อกที่สอง- เราระบุไว้ สองความหมายเป็นเปอร์เซ็นต์: ค่าแรก - รัศมีแนวนอน, ก ความหมายที่สอง - รัศมีแนวตั้งสำหรับการไล่ระดับสีแบบวงรี ระบุไว้สำหรับการไล่ระดับสี 8 สี. โปรดทราบว่าเราได้ระบุสีขาวเป็นสีสุดท้าย ซึ่งเติมเต็มพื้นที่ที่เหลือ(ทางเลือกหนึ่งคือเหลือไว้เพียงรูปร่างไล่ระดับสี)

บล็อกที่สาม- เราระบุไว้ สองความหมาย ในหน่วยความยาว (พิกเซลและ em): ค่าแรก - รัศมีแนวนอน, ก ความหมายที่สอง - รัศมีแนวตั้งสำหรับองค์ประกอบทรงรี ระบุไว้สำหรับการไล่ระดับสี 7สี.

การไล่ระดับสีแบบเรเดียล- การไล่ระดับสีเพื่อสร้างเอฟเฟกต์เมื่อสีหนึ่งเปลี่ยนไปเป็นสีอื่น ต่างจากการไล่ระดับสีเชิงเส้น วิธีนี้ใช้การเปลี่ยนผ่านแบบวงกลมหรือวงรี ทิศทางของการเปลี่ยนสีไปในทิศทางที่แตกต่างจากศูนย์กลาง การไล่ระดับสีแบบรัศมีเรียกอีกอย่างว่า "การไล่ระดับสีแบบวงกลม"

การไล่ระดับสีแบบรัศมีถูกตั้งค่าโดยใช้คุณสมบัติการไล่ระดับสีแบบรัศมีร่วมกับพื้นหลัง มีพารามิเตอร์ค่อนข้างน้อยซึ่งเราจะพิจารณาตามลำดับ

CSS ไวยากรณ์การไล่ระดับสีรัศมี

พื้นหลัง : การไล่ระดับสีแบบรัศมี ( สี1,สี2,...);

• ตำแหน่ง - พิกัดเริ่มต้น X และ Y (ส่วนใหญ่มักระบุเป็นเปอร์เซ็นต์) มีค่าคงที่:
  • บน-บนตรงกลาง (50% 0%)
  • ซ้ายบน-มุมซ้ายบน (0% 0%)
  • ขวาบน-มุมขวาบน (100% 0%)
  • ศูนย์กลาง (ค่าเริ่มต้น) - ศูนย์กลางของพื้นที่ (50% 50%)
  • กลางซ้าย - กลางซ้าย (0% 50%)
  • ตรงกลางขวา - ตรงกลางขวา (100% 50%)
  • กลางล่าง-ล่าง (50% 100%)
  • ซ้ายล่าง-ซ้ายล่าง (0% 100%)
  • ขวาล่าง-ล่างขวา (100% 100%)
  จำเป็นต้องมีคีย์เวิร์ด at
• รูปร่าง - ระบุรูปร่างของการไล่ระดับสี มีสองตัวเลือก:
  • วงกลม - วงกลม
  • วงรี - วงรี
• ขนาด - การไล่ระดับสีจะยืดออกไปอย่างไร สามารถรับค่าต่อไปนี้ได้
  • ด้านที่ใกล้ที่สุด - การไล่ระดับสีไปที่ขอบที่ใกล้ที่สุดขององค์ประกอบ
  • มุมที่ใกล้ที่สุด - การไล่ระดับสีมีแนวโน้มไปที่มุมที่ใกล้ที่สุด
  • ด้านไกลที่สุด (ค่าเริ่มต้น) - การไล่ระดับสีขยายไปจนถึงขอบไกลขององค์ประกอบ
  • มุมที่ใกล้ที่สุด - การไล่ระดับสีขยายไปยังมุมที่ไกลที่สุดขององค์ประกอบ
  ด้านล่างนี้เป็นตารางพร้อมตัวอย่าง
• color1 - สีเริ่มต้น
• color2 - สีสุดท้าย

สามารถกำหนดสีได้ รูปแบบ RGBสีเฉพาะหรือในรูปแบบ rgba (ดูรหัสสี html สำหรับไซต์)

คุณสามารถระบุการเปลี่ยนสีได้หลายสีโดยคั่นด้วยเครื่องหมายจุลภาค

ในตัวมาก รุ่นที่เรียบง่ายสามารถระบุได้เพียงสองสีเท่านั้น ตัวอย่างเช่น

พื้นหลัง : การไล่ระดับสีแบบรัศมี (#ADFF2F, #006400 )

สำหรับเบราว์เซอร์ คุณต้องตั้งค่าคุณสมบัตินี้ด้วยคำนำหน้าผู้ขาย: -moz-, -webkit-, -ms-, -o-:

พื้นหลัง : พื้นหลัง -moz-radial-gradient : -webkit-radial-gradient พื้นหลัง : -ms-radial-gradient พื้นหลัง : -o-radial-gradient

คุณสมบัติการไล่ระดับสีแบบรัศมีสามารถทำซ้ำได้: การทำซ้ำแบบรัศมี-การไล่ระดับสี

พื้นหลัง : การทำซ้ำรัศมีการไล่ระดับสี ( วงกลม, #8FBC8F, #8FBC8F .5em, โปร่งใส .5em, โปร่งใส 1.5em);

ตัวอย่างที่มีการไล่ระดับสีในแนวรัศมี

ตัวอย่างที่ 1 ตำแหน่งเริ่มต้นที่แตกต่างกัน

การใช้คีย์เวิร์ด at คุณสามารถระบุตำแหน่งของศูนย์กลางของการไล่ระดับสีในแนวรัศมีได้

Пример 2. Размер градиента

Ниже представлен пример, который показывает работу границы

На странице преобразуется в следующее

When we talk about gradients, it"s worth beginning with the fact that gradients are an image replacement in CSS. That"s a fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It"s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values and Replaced Content specification .

You can see how that gradient assumes the shape is ellipse . That"s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here"s what would happen if we had explicitly declared circle as the shape value:

Gradient { background-image: radial-gradient(circle, yellow, #f06d06); }

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the "closest-side" of the shape instead, like this:

Gradient { background-image: radial-gradient(circle closest-side, yellow, #f06d06); }

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: "I want this radial gradient to fade from the center point to the __________ , and everywhere else fills in to accommodate that."

A radial gradient doesn"t have to start at the default center either, you can specify a certain point by using "at ______ " as part of the first parameter, like:

Gradient { background-image: radial-gradient(circle at top right, yellow, #f06d06); }

I"ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser Support

Browser support for radial-gradient() is largely the same as . The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient() , if your browser support needs to go super deep, then you might consider using or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from

CSS не ограничивается линейными градиентами. В вашем распоряжении есть и радиальный градиент, который устанавливается соответствующей функцией radial-gradient() .

Поскольку о синтаксисе градиентных функций мы уже достаточно рассказали в предыдущих уроках, то сейчас нам уже нет необходимости на нем задерживаться - параметры здесь аналогичны radial-gradient() , вы меняете только имя функции.

Background-image: radial-gradient(#5b4ffc, #df02cd);

Позиционирование

Начальная точка вектора радиального градиента находится в центре эллиптической формы (который в свою очередь по умолчанию размещается в центре стилизуемого элемента), откуда градиент расходится кругами. Центр можно смещать, пользуясь теми же значениями, которые принимает background-position . Перед указанием позиции следует использовать приставку at:

Background-image: radial-gradient(at top left, #5b4ffc, #df0253);

Форма и радиус

Форма радиального градиента может быть круглой либо эллиптической. Определить форму можно с помощью указания радиуса либо одного из ключевых слов:

• ellipse - градиент эллиптической формы (значение по умолчанию);
• circle - градиент круглой формы.

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y . По умолчанию радиальным градиентом полностью заполняется фон элемента.

Background-image: radial-gradient(ellipse 180px 90px, #a09af1, #000038);

Размер

Существует несколько ключевых слов для управления размерами радиального градиента. Давайте рассмотрим более подробно каждое из них:

Опорные точки

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

Background-image: radial-gradient(#144bf1 30%, #3ee9ca 60%, #0a38e5);

Поддержка браузерами

По аналогии с linear-gradient() , если вы собираетесь внедрять функцию radial-gradient() в свой проект, стоит дополнить код CSS объявлениями с упоминанием вендорных префиксов, а также указать резервный цветовой фон для старых браузеров IE.

Далее в учебнике: repeating-radial-gradient() - повторяющийся радиальный градиент.

Рис. 1. Радиальный и линейный градиент

Радиальный градиент создаётся с помощью свойства background или background-image .

Синтаксис

background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>

Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.

• top left = left top = 0% 0% (в левом верхнем углу);
• top = top center = center top = 50% 0% (по центру вверху);
• right top = top right = 100% 0% (в правом верхнем углу);
• left = left center = center left = 0% 50% (по левому краю и по центру);
• center = center center = 50% 50% (по центру) - это значение по умолчанию;
• right = right center = center right = 100% 50% (по правому краю и по центру);
• bottom left = left bottom = 0% 100% (в левом нижнем углу);
• bottom = bottom center = center bottom = 50% 100% (по центру внизу);
• bottom right = right bottom = 100% 100% (в правом нижнем углу).

<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента

Значение	Код	Описание	Вид
closest-side	background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000);	Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса).
	background: radial-gradient(circle closest-corner at 30px 20px , #fff, #000); background: radial-gradient(closest-corner at 30px 20px , #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
	background: radial-gradient(circle farthest-side at 30px 20px , #fff, #000); background: radial-gradient(farthest-side at 30px 20px , #fff, #000);	Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока.
farthest-corner	background: radial-gradient(circle farthest-corner at 30px 20px , #fff, #000); background: radial-gradient(farthest-corner at 30px 20px , #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

Пример

องค์ประกอบนี้จะช่วยได้เมื่อคุณตระหนักถึงความจริงที่ว่าคุณไม่มีความคิดเลยว่าใครสามารถช่วยคุณได้บ้างและอย่างไร ในขณะนี้เราขอแนะนำว่าไม่มีใครสามารถช่วยคุณได้

ผลลัพธ์ ตัวอย่างนี้แสดงด้านล่าง

บันทึก

Chrome ก่อนเวอร์ชัน 26, Safari ก่อนเวอร์ชัน 6.1 และ Android ก่อนเวอร์ชัน 4.4 รองรับ -webkit-radial-gradient()

รองรับ Opera จนถึงเวอร์ชัน 12.10 -o-radial-gradient()

Firefox จนถึงเวอร์ชัน 16 รองรับ -moz-radial-gradient()

คุณสมบัติคำนำหน้าทั้งหมดไม่ใช้คำสำคัญ at เมื่อกำหนดตำแหน่งของจุดเริ่มต้นการไล่ระดับสี

ข้อมูลจำเพาะ

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

• คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
• คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้ ) - กลุ่มที่รับผิดชอบมาตรฐานพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
• ข้อเสนอแนะที่เสนอ ข้อแนะนำ) - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
• Working Draft - ฉบับร่างฉบับสมบูรณ์ยิ่งขึ้นที่ได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
• ร่างบรรณาธิการ ( ร่างบรรณาธิการ) - เวอร์ชันร่างของมาตรฐานหลังจากมีการเปลี่ยนแปลงโดยบรรณาธิการโครงการ
• ร่าง ( ข้อกำหนดฉบับร่าง) - เวอร์ชันร่างแรกของมาตรฐาน