Bán kính đường viền bảng CSS
|
Sử dụng các tiện ích như Show
Nút thuốcSử dụng tiện ích Không làm trònSử dụng Điều này được sử dụng phổ biến nhất để loại bỏ bán kính đường viền được áp dụng tại điểm ngắt nhỏ hơn Làm tròn các cạnh riêng biệtSử dụng Làm tròn góc riêng biệtSử dụng Áp dụng có điều kiệnHover, focus và các trạng thái khácTailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và các công cụ sửa đổi truy vấn phương tiện khác Sử dụng các giá trị tùy chỉnhTùy chỉnh chủ đề của bạnTheo mặc định, Tailwind cung cấp năm tiện ích kích thước bán kính đường viền. Bạn có thể thay đổi, thêm hoặc xóa những thông tin này bằng cách chỉnh sửa phần Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu tùy chỉnh chủ đề Giá trị tùy ýNếu bạn cần sử dụng một giá trị Giả sử bạn có một chủ đề trang web yêu cầu phải bo tròn các góc cho các thành phần bao gồm cả bảng. Hãy xem làm thế nào chúng ta có thể đạt được chúng và những thách thức trong việc đạt được như vậy là gì Hãy tạo một bảng đơn giản Hãy thêm một số kiểu dáng cơ bản cho nó bằng cách sử dụng các thuộc tính Làm tròn các góc bên ngoàiTiếp theo, hãy thêm một Whoa, các góc không được làm tròn. Chà, các góc của nền đã được bo tròn, nhưng không phải đường viền. Điều này là do đường viền của các ô trong bảng không được làm tròn - chúng giữ nguyên hình vuông. Hãy xem liệu chúng ta đã áp dụng đường viền ra bên ngoài bảng và xóa nó khỏi các ô riêng lẻ Bây giờ tất cả những gì chúng ta cần làm là thêm lại các đường viền bên trong, nhưng không làm tròn các cạnh bên ngoài của các ô. Nếu bạn xem lại các bảng trước đó, bạn cũng sẽ thấy rằng các đường viền bên trong rộng 2px. Điều này là do chúng tôi đang sử dụng Điều này đang bắt đầu tốt bây giờ. Bạn có thể dừng lại ở đó nếu đó là tất cả những gì bạn cần. Nếu bạn muốn tạo kiểu nền cho các ô hoặc hàng riêng lẻ (e. g. xen kẽ các màu hoặc tô sáng các hàng khi di chuột) thì chúng tôi sẽ sắp xếp thứ đó trước. Hãy thay đổi màu nền của hàng tiêu đề của chúng ta thành màu gì đó thật đẹp để làm cho nó nổi bật Và chúng tôi vừa phá vỡ các góc tròn đẹp đẽ của mình một lần nữa. Hãy nhớ rằng chúng tôi đã không làm tròn các góc của các ô riêng lẻ, chỉ làm tròn bảng. Rất may, mặc dù cách khắc phục hơi phức tạp đối với đường viền, nhưng nó dễ dàng hơn nhiều đối với nền. Chúng tôi chỉ có thể đặt Và chúng tôi đã có nó. Bây giờ chúng ta có các góc bàn tròn với một đoạn sao chép/dán dễ dàng Làm tròn các góc bên trongMặc dù cách trên hoạt động tốt nếu tất cả những gì bạn muốn làm là làm tròn 4 góc bên ngoài của bàn, nhưng nó không hoạt động tốt nếu bạn muốn làm tròn bất kỳ góc nào khác. Ví dụ: giả sử bạn muốn làm tròn các góc của tiêu đề bảng để nó trông tách biệt với phần nội dung. Nếu chúng ta sử dụng thủ thuật trước đó bằng cách sử dụng Nó gần như hoạt động hoàn hảo, ngoại trừ những bit này ở đây  Box Shadow để giải cứuThay vì sử dụng đường viền, chúng ta có thể sử dụng một mẹo nhỏ liên quan đến một Bây giờ chúng ta có thể tạo kiểu cho các ô còn lại và làm tròn các góc của chúng bao nhiêu tùy ý Và kết quả là đúng NameDepartmentOfficeJohnAdminNorthSmithLogisticsSouthDavidTransportEastPhần kết luậnLàm tròn các góc của bảng có vẻ là một nhiệm vụ đơn giản nhưng nó có thể dễ dàng trở nên khó khăn tùy theo yêu cầu của bạn. Nếu bạn chỉ làm tròn các góc của toàn bộ bảng, bán kính đường viền sẽ hoàn thành công việc. Tuy nhiên, nếu bạn cần làm tròn riêng phần đầu và phần thân hoặc thậm chí làm tròn các hàng của bảng riêng lẻ trong phần thân, thì bạn có thể hoàn thành công việc với một Chia sẻ trên Twitter · Chia sẻ trên Facebook UnusedCSS giúp chủ sở hữu trang web loại bỏ CSS không sử dụng của họ mỗi ngày. Đăng ký để xem bạn có thể loại bỏ bao nhiêu Đường viền CSS có thể có bán kính không?Thuộc tính bán kính đường viền được sử dụng để chỉ định bán kính của đường viền . Nó được sử dụng để cung cấp các góc tròn cho đường viền. Thuộc tính này chỉ có thể được sử dụng trong Firefox2-87 (đến tháng 3 năm 2021) và từ Firefox 88, thuộc tính phác thảo sẽ tự động tuân theo hình dạng được tạo bởi bán kính đường viền, vì vậy thuộc tính này không còn cần thiết nữa.
Sự khác biệt giữa bán kính đường viền 50% và 100% là gì?100% làm tròn 100% mỗi cạnh, 50% chỉ 50% mỗi cạnh . Nếu góc được làm tròn bởi bán kính quá lớn so với bất kỳ cạnh nào, thì bán kính hiệu dụng sẽ nhỏ hơn.
Chúng ta có thể thêm bán kính đường viền vào TD không?Để thêm bán kính đường viền vào hàng tr , bạn phải nhắm mục tiêu cụ thể dữ liệu bảng đầu tiên td trên hàng và hàng cuối cùng . |
