Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้าง Color Stops ระยะห่างเท่ากันด้วย CSS Radial Gradients

กำหนดอย่างน้อย 2 จุดสี (color stops) เพื่อสร้าง Radial Gradient ที่มีระยะห่างสีเท่ากัน

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 100px;
      background: radial-gradient(orange, green, yellow);
    }
  </style>
</head>
<body>
  <h2>Radial Gradient</h2>
  <div id="demo">Radial Gradients</div><br>
</body>
</html>

คำอธิบาย: radial-gradient(orange, green, yellow) ไม่ระบุเปอร์เซ็นต์ CSS จะกระจายสีอย่างเท่าเทียมกัน (evenly spaced) จากศูนย์กลางออกไป: ส้ม → เขียว → เหลือง ตรงข้ามกับ ID 1004062724 ที่ระบุเปอร์เซ็นต์เฉพาะเจาะจง