CSS border-radius generator

Tính năng của CSS border-radius generator

• 01

  Chế độ đồng nhất và mỗi góc

  Chế độ đồng nhất áp dụng một bán kính cho mỗi góc. Chế độ mỗi góc kiểm soát top-left, top-right, bottom-right và bottom-left độc lập — hình dạng pill, lá và thẻ không đối xứng là vài cú nhấp chuột.

• 02

  Các góc hình elip (X/Y)

  Chuyển đổi chế độ hình elip để chỉ định bán kính ngang và dọc cho mỗi góc — cú pháp CSS hỗ trợ cho các hình dạng blob hữu cơ.

• 03

  Ba đơn vị

  Chuyển đổi giữa px, % và rem. Giá trị phần trăm tạo các hình elip thực giãn cùng với hộp; giá trị rem theo dõi kích thước phông chữ gốc để có khả năng truy cập.

Câu hỏi thường gặp về CSS border-radius generator

Sự khác biệt giữa px và % là gì?

Các bán kính pixel là tuyệt đối — một góc 16px luôn là 16px. Bán kính phần trăm là tương đối với chiều rộng và chiều cao của phần tử, vì vậy 50% tạo ra một hình tròn hoàn hảo trên hộp vuông và một hình elip trên hình chữ nhật.

Khi nào tôi nên sử dụng chế độ hình elip?

Sử dụng chế độ hình elip khi bạn muốn một góc phình ra nhiều hơn trên một trục — ví dụ như pill ngang (50%/100%) hoặc hình dạng blob giống lá. CSS biểu diễn điều này là `top-left-x top-right-x ... / top-left-y top-right-y ...`.

Tại sao bán kính phần trăm của tôi trông sai trên hộp không vuông?

Tỷ lệ phần trăm trên border-radius là tương đối với cạnh tương ứng: tỷ lệ phần trăm ngang so với chiều rộng, tỷ lệ phần trăm dọc so với chiều cao. Trên hộp rộng, ngắn có nghĩa là các góc kéo dài thành các hình elip, không phải các vòng cung hoàn hảo.

Đầu ra có hoạt động trong mọi trình duyệt không?

Có — border-radius và cú pháp hình elip được hỗ trợ trong mọi trình duyệt hiện đại bao gồm tất cả các phiên bản evergreen của Safari, Firefox, Edge và Chrome.