ฟังก์ชัน radial-gradient

ฟังก์ชัน radial-gradient กำหนดการไล่ระดับสี แบบรัศมี ฟังก์ชันนี้ใช้กับคุณสมบัติที่กำหนดภาพพื้นหลัง: background, background-image หรือภาพขอบ: border-image, background-image-source.

โครงสร้าง

ตัวเลือก {
	background: radial-gradient([รูปทรง ประเภท ตำแหน่ง], สี1 ขนาด1, สี2 ขนาด2...);
}

ค่า

ค่า	คำอธิบาย
รูปทรง	ค่าที่รับได้: `ellipse` การไล่ระดับสีแบบวงรี (ค่าเริ่มต้น), `circle` การไล่ระดับสีแบบวงกลม
ประเภท	กำหนดการยืดของการไล่ระดับสี ค่าที่รับได้: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`
ตำแหน่ง	หลังจากคำหลัก `at` จะระบุตำแหน่งในหน่วยของขนาดใดๆ หรือโดยใช้คำหลัก `top`, `bottom`, `left`, `right`, `center` ในรูปแบบผสมต่างๆ
สี1	สีเริ่มต้นของการไล่ระดับสีในหน่วยของสีใดๆ
สี2	สีสิ้นสุดของการไล่ระดับสีในหน่วยของสีใดๆ
ขนาด	กำหนดความยาวของสีที่ระบุในการไล่ระดับสี ในหน่วยของขนาดใดๆ

ค่าสำหรับประเภท

ค่า	คำอธิบาย
`closest-side`	รูปทรงของการไล่ระดับสีตรงกับด้านที่ใกล้ที่สุดของบล็อก
`closest-corner`	รูปทรงของการไล่ระดับสีคำนวณจากข้อมูลระยะทางถึงมุมที่ใกล้ที่สุดของบล็อก
`farthest-side`	การไล่ระดับสีขยายไปจนถึงด้านที่ไกลที่สุดของบล็อก
`farthest-corner`	รูปทรงของการไล่ระดับสีคำนวณจากข้อมูลระยะทางถึงมุมที่ไกลที่สุดของบล็อก

หมายเหตุ

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

ตัวอย่าง . รูปแบบที่ง่ายที่สุด

มาลองกำหนดสีเริ่มต้นและสีสิ้นสุดกัน:

<div id="elem"></div>

#elem {
	background: radial-gradient(red, blue);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . เพิ่มตำแหน่ง

มาลองกำหนดตำแหน่งศูนย์กลาง: 30px - ระยะห่างจากซ้าย, 100px - ระยะห่างจากบน:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . ตำแหน่งเป็นเปอร์เซ็นต์

มาลองกำหนดตำแหน่งศูนย์กลางเป็นเปอร์เซ็นต์: 30% - ระยะห่างจากซ้าย, 50% - ระยะห่างจากบน:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30% 50%, red, blue);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . ตำแหน่งด้วยคำหลัก

สามารถใช้คำหลัก top, bottom, left, right, center ในรูปแบบผสมต่างๆ ได้ ตัวอย่างเช่น ตั้งการไล่ระดับสีไว้ทางขวากลาง:

<div id="elem"></div>

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . ขนาดของการไล่ระดับสี

ในกรณีนี้ การไล่ระดับสีจะทำงานดังนี้: ตั้งแต่ 0px ถึง 20px จะเป็นสีแดงล้วน ตั้งแต่ 20px ถึง 60px - การไล่ระดับสี จากแดงไปน้ำเงิน หลังจาก 60px - สีน้ำเงินล้วน:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . สีหลายสีติดต่อกัน

ในกรณีนี้ การไล่ระดับสีจะทำงานดังนี้: ตั้งแต่ 0px ถึง 20px จะเป็นสีแดงล้วน ตั้งแต่ 20px ถึง 40px จะเป็นสีน้ำเงินล้วน ตั้งแต่ 40px ถึง 60px - การไล่ระดับสีจากน้ำเงินไปเขียว หลังจาก 60px - สีเขียวล้วน:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . ขนาด + ตำแหน่ง

มาลองกำหนดขนาดสำหรับสีต่างๆ พร้อมกัน และตำแหน่งศูนย์กลางของการไล่ระดับสี:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

ตัวอย่าง . รูปทรงของการไล่ระดับสี

รูปทรงของการไล่ระดับสีกำหนดโดยพารามิเตอร์แรก และสามารถรับค่าได้ 2 ค่า: circle (การไล่ระดับสีแบบวงกลม) หรือ ellipse (การไล่ระดับสี แบบวงรี ค่าเริ่มต้น) แล้วทำไมก่อนหน้านี้ เราไม่เห็นการไล่ระดับสีแบบวงรี ทั้งๆ ที่ มันเป็นค่าเริ่มต้น? เพราะก่อนหน้านี้ รูปทรงของบล็อกเป็นสี่เหลี่ยมจัตุรัส ถ้าเราเปลี่ยน รูปทรงเป็นสี่เหลี่ยมผืนผ้า เราก็จะเห็นการไล่ระดับสีแบบวงรี:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . การไล่ระดับสีแบบวงกลม

มาลองสร้างการไล่ระดับสีแบบวงกลมในบล็อก สี่เหลี่ยมผืนผ้ากัน โดยกำหนดรูปทรงของการไล่ระดับสี ด้วยคำหลัก circle เป็นพารามิเตอร์แรก:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . เพิ่มตำแหน่ง

มาลองเพิ่มตำแหน่งของการไล่ระดับสี เข้าไปในโค้ดก่อนหน้านี้:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท farthest-corner + circle

รูปทรงของการไล่ระดับสีคำนวณจาก ข้อมูลระยะทางถึงมุมที่ไกลที่สุดของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท farthest-corner + ellipse

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท farthest-side + circle

การไล่ระดับสีขยายไปจนถึงด้านที่ไกลที่สุด ของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท farthest-side + ellipse

การไล่ระดับสีขยายไปจนถึงด้านที่ไกลที่สุด ของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท closest-corner + circle

รูปทรงของการไล่ระดับสีคำนวณจาก ข้อมูลระยะทางถึงมุมที่ใกล้ที่สุดของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท closest-corner + ellipse

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท closest-side + circle

รูปทรงของการไล่ระดับสีตรงกับด้านที่ใกล้ที่สุด ของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ตัวอย่าง . ประเภท closest-side + ellipse

รูปทรงของการไล่ระดับสีตรงกับด้านที่ใกล้ที่สุด ของบล็อก:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

ดูเพิ่มเติม

ฟังก์ชัน linear-gradient,
ซึ่งสร้างการไล่ระดับสีแบบเส้นตรง
ฟังก์ชัน repeating-linear-gradient,
ซึ่งสร้างการไล่ระดับสีแบบเส้นตรงที่ซ้ำกัน
ฟังก์ชัน repeating-radial-gradient,
ซึ่งสร้างการไล่ระดับสีแบบรัศมีที่ซ้ำกัน