ฟังก์ชัน CSS ellipse()

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

CSS ellipse() ฟังก์ชันนี้กำหนดวงกลมที่มีเส้นรอบ x และ y สองเส้น

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

ตัวอย่าง

ตัวอย่าง 1

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

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

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

ตัวอย่าง 2

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

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

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

ตัวอย่าง 3

ใช้ clip-path และ ellipse() สร้างกราฟฟิกเพื่อการเคลื่อนไหว:

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

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

ตัวอย่าง 4

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

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

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

CSS ศัพท์

ellipse(xy-radius ที่ตำแหน่ง)

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

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

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

เพิ่มเติมเพื่อดู

อ้างอิง：CSS แนวตัด clip-path

อ้างอิง：CSS shape-outside รูปทรงด้านนอก

อ้างอิง：CSS วงกลม() 函数

อ้างอิง：CSS inset() 函数

อ้างอิง：CSS polygon() 函数