การตั้งค่าขนาด Radial Gradients ด้วย CSS

Radial Gradient Size: ควบคุมขนาดวงกลม/ไข่ของ Gradient

ใน radial-gradient() พารามิเตอร์ที่ 2 (หลัง shape) กำหนดขนาด: farthest-corner (default), closest-side, closest-corner, farthest-side, หรือระบุ width height (px, %)

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    #radial {
      height: 200px; width: 200px;
      background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));
    }
  </style>
</head>
<body>
  <h1>Radial Gradient Size Example</h1>
  <div id="radial"></div>
</body>
</html>

Size Keywords ความหมาย

Keyword	ความหมาย
closest-side	รัศมี = ระยะจากศูนย์กลางถึงขอบใกล้ที่สุด
farthest-side	รัศมี = ระยะถึงขอบไกลที่สุด
closest-corner	รัศมี = ระยะถึงมุมใกล้ที่สุด
farthest-corner	รัศมี = ระยะถึงมุมไกลที่สุด (default)

Explicit Size (ความยาว/%)

radial-gradient(50px 100px at center, red, blue)   /* ellipse 50x100px */
radial-gradient(50% 50% at center, red, blue)      /* ellipse ครึ่งกว้าง ครึ่งสูง */
radial-gradient(circle 80px at center, red, blue)  /* circle รัศมี 80px */

Position (at ...)

radial-gradient(circle at top left, red, blue)        /* มุมซ้ายบน */
radial-gradient(circle at 100% 0, red, blue)          /* มุมขวาบน */
radial-gradient(circle at 50px 100px, red, blue)      /* พิกเซลแน่นอน */

Repeating Radial Gradient

.target {
  background: repeating-radial-gradient(
    circle at center,
    #fff, #fff 10px,
    #000 10px, #000 20px
  );
}