Hàm ellipse() CSS

Định nghĩa và cách sử dụng

CSS của ellipse() Hàm định nghĩa một ellipse có hai bán kính x và y.

ellipse() Hàm thường được sử dụng với clip-path Thuộc tính và shape-outside Sử dụng cùng nhau.

Mô hình

Mô hình 1

Cắt hình ảnh thành ellipse với bán kính x là 50%, bán kính y là 30%:

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

Thử ngay

Mô hình 2

Cắt hình ảnh thành ellipse với bán kính x là 50%, bán kính y là 30% và định vị tâm ellipse ở bên phải:

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

Thử ngay

Mô hình 3

Sử dụng clip-path và ellipse() Thực hiện hiệu ứng động:

#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%);}
}

Thử ngay

Mô hình 4

Kết hợp sử dụng ellipse()、clip-path và shape-outside:

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

Thử ngay

Ngữ pháp CSS

ellipse(xy-radius at position)

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn hàm này.

Trang liên quan

Tham khảo:Thuộc tính clip-path CSS

Tham khảo:Thuộc tính shape-outside của CSS

Tham khảo:Hàm circle() CSS

Tham khảo:Hàm inset() CSS

Tham khảo:Hàm polygon() CSS