Bạn có thể cung cấp cho bất kỳ phần tử nào "góc tròn" bằng cách áp dụng border-radiusCSS. Bạn sẽ chỉ nhận thấy nếu có sự thay đổi màu sắc. Ví dụ: nếu phần tử có màu nền hoặc đường viền khác với phần tử đó. Ví dụ đơn giản:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Nó thực sự không còn cần thiết nữa, nhưng để hỗ trợ trình duyệt tốt nhất có thể, bạn có thể đặt tiền tố bằng -webkit-và -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Lưu ý thứ tự của các thuộc tính đó: tiền tố của nhà cung cấp được liệt kê đầu tiên và phiên bản “đặc tả” không có tiền tố được liệt kê sau cùng. Đây là cách chính xác để làm điều đó. Bán kính đường viền là một ví dụ đặc biệt tốt về lý do tại sao chúng tôi làm theo cách đó. Trong phiên bản sử dụng phức tạp hơn một chút border-radius(trong đó bạn chuyển hai giá trị thay vì một giá trị), -webkit-tiền tố của nhà cung cấp cũ hơn sẽ làm điều gì đó hoàn toàn khác so với phiên bản “spec”. Vì vậy, nếu chúng ta sao chép / dán một cách mù quáng các giá trị giống nhau vào cả ba thuộc tính, chúng ta có thể thấy các kết quả khác nhau trên nhiều trình duyệt. Tìm hiểu thêm về kịch bản này. Để có tính nhất quán lâu dài, tốt nhất bạn nên liệt kê phiên bản “spec” sau cùng.
Ngày nay, khá thực tế khi bỏ tiền tố và chỉ sử dụng bán kính đường viền, như đã thảo luận ở đây.
Nếu phần tử có nền hình ảnh, nó sẽ được cắt ở góc tròn một cách tự nhiên:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Đôi khi bạn có thể thấy background-color"rò rỉ" bên ngoài đường viền khi border-radiusnó xuất hiện. (xem). Để ngăn chặn điều này, bạn sử dụng background-clip:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Chỉ với một giá trị, border-radiussẽ giống nhau trên cả bốn góc của một phần tử. Nhưng đó không phải là trường hợp. Bạn có thể xác định từng góc riêng biệt nếu bạn muốn:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Bạn cũng có thể chỉ định hai hoặc ba giá trị. MDN giải thích rõ:
Nếu một giá trị được đặt, bán kính này áp dụng cho cả 4 góc .
Nếu hai giá trị được đặt, giá trị đầu tiên áp dụng cho top-leftvà bottom-rightgóc, giá trị thứ hai áp dụng cho top-rightvà bottom-leftgóc.
Bốn giá trị áp dụng cho top-left, top-right, bottom-right, bottom-leftgóc theo thứ tự đó.
Ba giá trị: Giá trị thứ hai áp dụng cho top-rightvà cả bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Bạn cũng có thể chỉ định các bức xạ trong đó góc được làm tròn. Nói cách khác, hình tròn không nhất thiết phải là hình tròn hoàn hảo, nó có thể là hình elip. Điều này được thực hiện bằng cách sử dụng dấu gạch chéo (“/”) giữa hai giá trị.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Lưu ý: Firefox chỉ hỗ trợ đường viền hình elip trong các trình duyệt WebKit 3.5+ trở lên (ví dụ: Safari 4) coi “40px 10px” giống như “40px / 10px” không chính xác.
Bạn có thể chỉ định giá trị của border-radiusphần trăm. Điều này đặc biệt hữu ích khi muốn tạo hình tròn hoặc hình elipse, nhưng có thể được sử dụng bất kỳ lúc nào bạn muốn bán kính đường viền tương quan trực tiếp với chiều rộng của các phần tử.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Lưu ý: Trong Safari, giá trị phần trăm cho bán kính đường viền chỉ được hỗ trợ trong 5.1+. Trong Opera, chỉ được hỗ trợ trong 11.5+.
Đây là từng thuộc tính riêng lẻ, với tiền tố của nhà cung cấp:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Lưu ý: Mỗi giá trị đó cũng có thể có giá trị được phân tách bằng dấu cách, chẳng hạn như “5px 10px”, hoạt động giống như giá trị được phân tách bằng dấu gạch chéo trong cách viết tắt (bán kính ngang (dấu cách) bán kính dọc).
Tài nguyên
- Công cụ nhanh chóng để tạo mã bán kính đường viền
- Tài liệu Mozilla
- Tìm kiếm bán kính hoàn hảo
- Chúng ta có cần thêm tiền tố bán kính đường viền nữa không?
Đây là một số điều nhỏ để chơi với các thuộc tính và giá trị khác nhau:
Xem Cây bút Tất cả các bán kính biên giới 'của Chris Coyier (@chriscoyier) trên CodePen.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4* | 3 * | 9 | 12 | 3.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 * | 3.2 * |