ฟังก์ชัน radial-gradient() ของ CSS

การเขียนและการใช้งาน

CSS radial-gradient() ฟังก์ชันจะตั้งค่ากราญสีรัศมีเป็นภาพแบบพื้นหลัง

กราญสีรัศมีถูกกำหนดโดยจุดศูนย์

เพื่อที่จะสร้างกราญสีรัศมี ต้องต้องการกำหนดกราญสีอย่างน้อยสองสี

ตัวอย่างที่แสดงกราญสีรัศมี

ตัวอย่าง

ตัวอย่าง 1

กราญสีแจกแจงที่สมมาตรตามทิศทางรัศมี

#grad {
  background-image: radial-gradient(red, green, blue);
}

ทดลองเอง

ตัวอย่าง 2

กราญสีแจกแจงตามทิศทางรัศมีที่เปลี่ยนแปลงตามสี

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

ทดลองเอง

ตัวอย่าง 3

กระจายสีทางรัศมีที่มีรูปร่างทรงกลม:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

ทดลองเอง

ตัวอย่าง 4

ใช้คำถามขนาดต่าง ๆ สำหรับกระจายสีทางรัศมี:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

ทดลองเอง

ภาษา CSS

radial-gradient(shape size at position, start-color, ... , last-color);

รายละเอียดเทคโนโลยี

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

ตัวเลขในตารางนี้แสดงการรองรับฟังก์ชันโดยเบราเซอร์เวอร์ชั่นที่สนับสนุนอย่างเต็มที่

หน้าที่เกี่ยวข้อง

คู่มือ:gradient ของ CSS

อ้างอิง：คุณสมบัติ background-image ของ CSS

อ้างอิง：ฟังก์ชัน conic-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน linear-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน repeating-conic-gradient() ของ CSS

อ้างอิง：ฟังก์ชัน repeating-linear-gradient() ของ CSS

อ้างอิง：CSS repeating-radial-gradient() ฟังก์ชัน