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
Thêm bán kính dọc
Trong Bán kính dọc, đặt cho mỗi góc một giá trị thứ hai từ 0 đến 100 theo cùng đơn vị. Lần chỉnh đầu tiên sẽ tắt Liên kết tất cả các góc và ghi khai báo theo dạng ngang / dọc: bốn giá trị theo chiều kim đồng hồ bắt đầu từ góc trên bên trái, một dấu gạch chéo, rồi bốn giá trị nữa, nhờ đó các góc thành hình elip. Huy hiệu trạng thái hiển thị CSS HỢP LỆ; giá trị nào nằm ngoài khoảng sẽ chuyển nó thành KIỂM TRA GIÁ TRỊ và chặn cả sao chép lẫn tải xuống.
- 06
Sao chép hoặc tải xuống CSS
Xuất kết quả hiện tại. CSS / HTML. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.