ฟังก์ชัน circle() ของ CSS

การกำหนดและการใช้งาน

CSS circle() ฟังก์ชันใช้เพื่อเรียกใช้วงกลมที่มีเส้นรอบวงและตำแหน่ง

circle() ฟังก์ชันทั่วไปมักถูกใช้ร่วมกับ clip-path รายละเอียด shape-outside ใช้ร่วมกันกับรายละเอียด

ตัวอย่าง

ตัวอย่าง 1

ตัดรูปภาพเป็นวงกลมที่มีเส้นรอบวง 50%:

img {
  clip-path: circle(50%);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตัดรูปภาพเป็นวงกลมที่มีเส้นรอบวง 50% และจัดตำแหน่งศูนย์วงที่ด้านขวา:

img {
  clip-path: circle(50% at right);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้ clip-path และ circle() สร้างปรากฎการณ์การเคลื่อนไหว:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

ทดลองด้วยตัวเอง

ตัวอย่าง 4

ใช้ร่วมกัน circle()、clip-path และ shape-outside:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

ทดลองด้วยตัวเอง

CSS ภาษา

circle(radius ที่ตำแหน่ง)

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

การสนับสนุนเบราเซอร์

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

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

อ้างอิง:CSS ระบุ clip-path

อ้างอิง:CSS shape-outside คุณสมบัติ

อ้างอิง:ฟังก์ชัน ellipse() ของ CSS

อ้างอิง:ฟังก์ชัน CSS inset()

อ้างอิง:ฟังก์ชัน CSS polygon()