ตัวอย่าง
ซ้ำลาดเชิงเส้น:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} ลองตัวเอง» ความหมายและการใช้งาน
repeating-linear-gradient() ฟังก์ชั่นที่ใช้ในการทำซ้ำการไล่ระดับสีแบบเส้นตรง
| เวอร์ชัน: | CSS3 |
|---|
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่รองรับฟังก์ชั่น
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| ฟังก์ชัน | |||||
|---|---|---|---|---|---|
| repeating-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:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| ความคุ้มค่า | ลักษณะ |
|---|---|
| angle | กำหนดมุมของทิศทางสำหรับการไล่ระดับสี จาก 0deg เพื่อ 360deg เริ่มต้นคือ 180deg |
| side-or-corner | กำหนดตำแหน่งของจุดเริ่มต้นของสายการไล่ระดับสี ประกอบด้วยสองคำสำคัญ: คนแรกที่แสดงให้เห็นด้านในแนวนอนไปทางซ้ายหรือขวาและด้านแนวตั้งที่สองหนึ่งบนหรือด้านล่าง การสั่งซื้อที่ไม่เกี่ยวข้องและแต่ละคำหลักที่เป็นตัวเลือก |
| color-stop1, color-stop2,... | หยุดสีเป็นสีที่คุณต้องการที่จะทำให้เปลี่ยนราบรื่นหมู่ ค่านี้ประกอบด้วยค่าสีตามตำแหน่งที่หยุดไม่จำเป็น (a percentage between 0% and 100% or a length along the gradient axis) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ที่แตกต่างกันการไล่ระดับสีเชิงเส้นซ้ำ:
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1
to 12.0 */
background: -moz-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera
11.1 to 12.0 */
background: -moz-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad3 {
height: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background:
-moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox
3.6 to 15 */
background: repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* Standard syntax (must be last) */
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: ไล่ระดับสี CSS3
ฟังก์ชั่นการอ้างอิง CSS