home

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

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

สามารถสร้าง Radial Gradient ที่มีจุดสี (Color Stops) ห่างกันไม่เท่ากันได้โดยระบุเปอร์เซ็นต์สำหรับแต่ละสี

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

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

คำอธิบาย: radial-gradient(orange 20%, green 15%, yellow 50%) กำหนดให้สีส้มจบที่ 20% สีเขียวจบที่ 15% (ทับซ้อนสีส้ม) สีเหลืองจบที่ 50% การระบุเปอร์เซ็นต์ทำให้ควบคุมขนาดของแต่ละสีได้แม่นยำ