Hệ thống bên ngoài chỉ là nền tảng tạo mã, vì vậy các bản ghi bảng sẽ được hiển thị dưới dạng các bảng Html đơn giản mà bạn có thể thêm kiểu vào đó
Bản ghi bảng sẽ cung cấp cho bạn các thuộc tính để xác định 4 lớp - Lớp kiểu / Kiểu tiêu đề / Kiểu đường lẻ và Kiểu đường chẵn
Như bạn có thể thấy trong hình nếu đang sử dụng chủ đề Dublin, bạn có thể thấy cả hai lớp TableRecords_OddLine và TableRecords_EvenLine với thuộc tính border-bottom. 1px solid #ddd, theo tôi, có vẻ như đó là nguyên nhân gây ra sự cố [không thực sự là sự cố vì nó giống như thế này theo thiết kế] bạn đã báo cáo
Điều này đang được nói, bạn có thể dễ dàng tùy chỉnh các Lớp đó hoặc tạo các Lớp mới để thực hiện hành vi bạn cần
Để khắc phục đơn giản và nhanh chóng, hãy tạo các lớp mới dựa trên các lớp được xác định trên hình ảnh trước đó, xóa thuộc tính border-bottom. 1px solid #ddd, sau đó bạn sẽ kiểm soát đường viền bạn cần trong mỗi ô vì bảng sẽ không có đường viền bây giờ
Tuy nhiên, điều này hoạt động, vì cách tốt nhất là cố gắng tránh css nội tuyến và sử dụng các lớp thay thế. Nhưng để khắc phục nhanh, đề xuất của tôi sẽ thực hiện công việc
Bạn có thể cung cấp cho bất kỳ phần tử nào "các góc bo tròn" bằng cách áp dụng một
border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}
thuộc tính cấu thành
border-radius: {1,4} [ / {1,4} ]?
2border-radius: {1,4} [ / {1,4} ]?
3border-radius: {1,4} [ / {1,4} ]?
4border-radius: {1,4} [ / {1,4} ]?
5border-radius: {1,4} [ / {1,4} ]?
thuộc tính logic
Chúng được gọi là thuộc tính “vật lý” vì chúng đặt bán kính theo vị trí vật lý của góc [e. g. trên cùng bên trái]. Nhưng
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}Lúc đầu, nó hơi khó hiểu, nhưng thứ tự thực sự quan trọng, đặc biệt là khi làm việc với
border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}.element {
border-radius: 10px;
}.element {
border-radius: 10px;
}.element {
border-radius: 10px;
}border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?cú pháp
border-radius: {1,4} [ / {1,4} ]?- Giá trị ban đầu.
14border-radius: {1,4} [ / {1,4} ]? - Áp dụng đối với. tất cả các yếu tố
- Thừa hưởng. không
- Computed values: pair of computed values
- hoạt hình. theo giá trị tính toán
Thuộc tính
border-radius: {1,4} [ / {1,4} ]?.element {
border-radius: 10px;
}Vì vậy, nếu chúng ta muốn đặt một bán kính khác ở trên cùng bên trái và dưới cùng bên phải nhưng áp dụng cùng một bán kính ở trên cùng bên phải và dưới cùng bên trái, chúng ta có thể sử dụng cú pháp ba giá trị
border-radius: {1,4} [ / {1,4} ]?
Làm tròn hình elip [______216]
Bạn cũng có thể chỉ định các bán kính trong đó góc được làm tròn bởi. 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 [
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?
Ghi chú. Firefox chỉ hỗ trợ đường viền hình elip trong 3. 5+. Các trình duyệt WebKit cũ hơn [e. g. Safari 4 trở xuống] đối xử không đúng với
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?giá trị
Thuộc tính
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?Bạn có thể chỉ định giá trị của
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?
Ghi chú. Trong Safari, giá trị phần trăm cho
border-radius: {1,4} [ / {1,4} ]?Gotchas
Có một số điều cần lưu ý khi làm việc với tài sản
border-radius: {1,4} [ / {1,4} ]?Ảnh nền đã cắt
Nếu phần tử có nền hình ảnh, nó sẽ được cắt bớt ở góc tròn một cách tự nhiên
border-radius: {1,4} [ / {1,4} ]?Chảy màu nền
Đôi khi, bạn có thể thấy một "rò rỉ"
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?Bán kính đường viền chồng chéo
Jay Sitter đã đề cập đến những gì xảy ra khi giá trị của một góc bán kính lớn đến mức nó chồng lên bán kính của một góc khác. Giống như ví dụ này, nơi chúng ta sẽ tạo hình dạng "viên thuốc" ở bên phải với ít làm tròn hơn ở bên trái
Dự phòng nhúng CodePen
Chúng tôi đang chuyển đổi bán kính của
border-radius: {1,4} [ / {1,4} ]?Thử nghiệm
Dự phòng nhúng 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 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
ChromeFirefoxIEEdgeSafari4*3*9123.1*Di động / Máy tính bảng
Android ChromeAndroid FirefoxAndroidiOS Safari108< . 1*1072.1*3. 2*Bây giờ không cần thiết, nhưng để hỗ trợ trình duyệt tốt nhất có thể, bạn có thể đặt trước thuộc tính bằng
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?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 "spec" không có tiền tố được liệt kê cuối 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 phức tạp hơn một chút của việc sử dụng
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?Ngày nay, việc bỏ tiền tố và chỉ sử dụng vanilla
border-radius: {1,4} [ / {1,4} ]?Đây là từng thuộc tính riêng lẻ, với tiền tố của nhà cung cấp
border-radius: {1,4} [ / {1,4} ]?Mỗi giá trị trong số này cũng có thể có một giá trị được phân tách bằng dấu cách, chẳng hạn như
border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?border-radius: {1,4} [ / {1,4} ]?