Lộ trình tác vụ / từ đầu vào đến kết quả
Cách tạo dáng border radius trong CSS
- 01
Chọn đơn vị
Đặt Đơn vị thành Pixel hoặc Phần trăm — không gian làm việc bắt đầu ở Pixel. Pixel giữ nguyên ở mọi kích thước phần tử; giá trị phần trăm co giãn theo phần tử, và đó chính là thứ làm nên các hình dạng hữu cơ, bất đối xứng.
- 02
Điều chỉnh bốn góc
Di chuyển Trên trái, Trên phải, Dưới phải và Dưới trái — mỗi góc từ 0 đến 100 theo đơn vị đã chọn, theo bước 1. Cả bốn bắt đầu ở 24 px, và thẻ xem trước vẽ lại theo mọi thay đổi.
- 03
Liên kết hoặc tách các góc
Giữ Liên kết tất cả các góc bật để đổi mọi góc cùng lúc, hoặc tắt nó để tạo dáng từng góc độc lập. Không gian làm việc ghi rõ cạnh công tắc: thay đổi một góc sẽ cập nhật cả bốn khi đang liên kết.
- 04
Thử hình mẫu
Nhấn Tải mẫu để lấy một tham chiếu bất đối xứng: Trên trái và Dưới phải ở 64 px, Trên phải và Dưới trái ở 12 px, đã tách liên kết — hình chiếc lá chéo dùng trên thẻ và avatar. Đặt lại đưa về mặc định đồng đều 24 px.
- 05
Kiểm tra khai báo được tạo
Đầu ra luôn liệt kê bốn giá trị theo chiều kim đồng hồ — trên-trái, trên-phải, dưới-phải, dưới-trái — nên mọi góc đều tường minh khi bạn dán. Huy hiệu trạng thái hiển thị CSS HỢP LỆ, và bất kỳ góc nào ngoài dải sẽ chuyển nó thành KIỂM TRA GIÁ TRỊ và chặn sao chép.
- 06
Sao chép hoặc tải xuống CSS
Nhấn Sao chép CSS để chép quy tắc .rounded-card dưới dạng khai báo border-radius bốn giá trị, hoặc Tải xuống .css để lưu thành toolars-border-radius.css. Cùng một khai báo dùng được cho hình ảnh, nút bấm, thẻ và bất kỳ phần tử nào khác.