ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการไล่ระดับสีเชิงเส้นที่เริ่มต้นที่ด้านบน มันเริ่มต้นสีแดง, สีเหลืองเปลี่ยนไปแล้วสีน้ำเงิน:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
ลองตัวเอง» ความหมายและการใช้งาน
linear-gradient() ฟังก์ชั่นสร้าง "image" ซึ่งหมายถึงลาดเชิงเส้นของสี
เพื่อสร้างลาดเชิงเส้นคุณต้องกำหนดอย่างน้อยสองหยุดสี หยุดสีเป็นสีที่คุณต้องการที่จะทำให้เปลี่ยนราบรื่นหมู่ นอกจากนี้คุณยังสามารถกำหนดจุดเริ่มต้นและทิศทาง (or an angle) พร้อมกับผลการไล่ระดับสี
ตัวอย่างของลาดเชิงเส้น:
| เวอร์ชัน: | CSS3 |
|---|
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่รองรับฟังก์ชั่น
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| ฟังก์ชัน | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS ไวยากรณ์
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| ความคุ้มค่า | ลักษณะ |
|---|---|
| direction | กำหนดจุดเริ่มต้นและทิศทาง (or an angle) พร้อมกับผลการไล่ระดับสี |
| color-stop1, color-stop2,... | หยุดสีเป็นสีที่คุณต้องการที่จะทำให้เปลี่ยนราบรื่นหมู่ ค่านี้ประกอบด้วยค่าสีตามตำแหน่งที่หยุดไม่จำเป็น (a percentage between 0% and 100% or a length along the gradient axis) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ลาดเชิงเส้นที่เริ่มต้นจากด้านซ้าย มันเริ่มต้นสีแดง, สีฟ้าเปลี่ยนไป:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} ลองตัวเอง» ตัวอย่าง
ลาดเชิงเส้นที่เริ่มต้นที่ด้านบนซ้าย (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} ลองตัวเอง» ตัวอย่าง
ลาดเชิงเส้นที่มีมุมมองที่ระบุ
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} ลองตัวเอง» ตัวอย่าง
ลาดเชิงเส้นกับหยุดหลายสี:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} ลองตัวเอง» ตัวอย่าง
ลาดเชิงเส้นที่มีความโปร่งใส:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: ไล่ระดับสี CSS3
ฟังก์ชั่นการอ้างอิง CSS