Hãy bắt đầu với những điều cơ bản. Hy vọng điều này sẽ không làm bạn chán. Có thể bạn đã quen thuộc với CSS và bạn cũng biết về Border-Radius. Nó đã xuất hiện khoảng vài năm nay, chủ yếu được sử dụng với một giá trị duy nhất như sau: border-radius: 1em và có thể là một trong những tính năng CSS3 được thảo luận / yêu thích nhất vào năm 2010.
Bất cứ khi nào bạn chỉ sử dụng một giá trị duy nhất, tất cả các góc đều được làm tròn theo giá trị này.
Như bạn có thể thấy trong ví dụ trên, bên cạnh các giá trị độ dài cố định như px, rem hoặc em, bạn cũng có thể sử dụng tỷ lệ phần trăm. Chúng chủ yếu được sử dụng để tạo vòng tròn bằng cách đặt bán kính đường viền thành 50%. Giá trị phần trăm dựa trên chiều rộng và chiều cao của phần tử đã cho. Vì vậy, khi bạn sử dụng nó trên một hình chữ nhật, bạn sẽ không còn các góc đối xứng nữa. Dưới đây là ví dụ cho thấy sự khác biệt giữa bán kính đường viền: 110px và Border-Radius: 30% được áp dụng cho hình chữ nhật.
Làm chủ Border-Radius trong 5 phút
Khi border-radius có 4 giá trị khác nhau
Làm chủ Border-Radius trong 5 phút
Tám giá trị được phân tách bằng dấu gạch chéo (đây là nơi mà nó trở nên thú vị)
Tôi nghĩ hầu hết các bạn đã làm tất cả những gì tôi giải thích ở trên. Bây giờ chúng ta đến phần thú vị. Điều gì xảy ra, nếu bạn tách các giá trị bằng dấu gạch chéo và chỉ định tối đa tám giá trị? Hãy xem, thông số kỹ thuật nói gì về điều đó:
“Nếu các giá trị được đưa ra trước và sau dấu gạch chéo, thì các giá trị trước dấu gạch chéo đặt bán kính ngang và các giá trị sau dấu gạch chéo đặt bán kính dọc. Nếu không có dấu gạch chéo, thì các giá trị đặt cả hai bán kính bằng nhau. ”
Vì vậy, các giá trị trước dấu gạch chéo chịu trách nhiệm về khoảng cách ngang trong khi các giá trị sau dấu gạch chéo xác định độ dài theo chiều dọc. Nhưng điều đó có nghĩa gì? Ghi các giá trị phần trăm trên các hình chữ nhật? Chúng tôi có các giá trị tuyệt đối khác nhau cho khoảng cách dọc và ngang và các góc được làm tròn không đối xứng và đó chính xác là những gì bạn nhận được khi sử dụng cú pháp gạch chéo.
Vì vậy khi bạn so sánh border-radius: 4em 8em to border-radius: 4em / 8em tthì sẽ cho ra kết quả khác nhau.
Làm chủ Border-Radius trong 5 phút
Các góc đối xứng ở bên trái tạo thành một phần tư hình tròn, trong khi các góc không đối xứng ở bên phải là một phần của hình elip.
Thành thật mà nói, những hình dạng mà bạn có được với cái này trông hơi kỳ quặc. Nhưng hãy nhớ các vòng tròn bạn tạo với bán kính đường viền: 50%. Bạn nhận được một hình tròn vì cả hai giá trị xác định một cạnh cộng lại tới 100% (50% + 50% = 100%) và không có đường thẳng nào còn lại, điều đó nhắc bạn về hình vuông ban đầu. Nếu bạn áp dụng cùng một logic cho cú pháp border-radius tám giá trị đầy đủ, bạn có thể tạo một hình dạng trông giống như miếng gảy hoặc một ô hữu cơ:
Làm chủ Border-Radius trong 5 phút
Thực ra, hình dạng thật của nó là từ bốn hình elip chồng lên nhau. Vậy là dể hình dung hơn rồi nhỉ.
Làm chủ Border-Radius trong 5 phút
Đừng sợ, hiện nay có rất nhiều trang web hổ trợ chúng ta tạo hình border-radius mà không cần code
