Hàm circle() trong CSS

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

CSS của circle() Hàm được sử dụng để định nghĩa một hình tròn có bán kính và vị trí.

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

Mô hình

Mẫu 1

Cắt hình ảnh thành hình tròn bán kính 50%:

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

Thử ngay

Mẫu 2

Cắt hình ảnh thành hình tròn bán kính 50% và định vị tâm ở bên phải:

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

Thử ngay

Mẫu 3

Sử dụng clip-path và circle() Thực hiện hiệu ứng hoạt hình:

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

Thử ngay

Mẫu 4

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

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

Thử ngay

Ngữ pháp CSS

circle(radius Tại vị trí)

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ợ hàm này hoàn toàn.

Trang liên quan

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

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

Tham khảo:Hàm ellipse() trong CSS

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

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