Trang chủ
CSS
Phân trang CSS
Tryit: Phân trang với đường viền tròn
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> .pagination { display: inline-block; } .phân trang a { color: black; nổi: trái; phần đệm: 8px 16px; trang trí văn bản: không có; đường viền: 1px liền khối #ddd; } .pagination a.active { màu nền: #4CAF50; màu trắng; đường viền: 1px liền khối #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} .pagination a:first-child { border-top-left-radius: 5px; bán kính viền dưới bên trái: 5px; } .pagination a:last-child { bán kính đường viền trên cùng bên phải: 5px; bán kính đường viền dưới cùng bên phải: 5px; } </style> </head> <body> <h2>Phân trang với viền tròn</h2> <div class="pagination"> <a href="#">«</a> <a href=" #">1</a> <a class="active" href="#">2</a> <a href="#">3</a> <a href="#">4</ a> <a href="#">5</a> <a href="#">6</a> <a href="#">»</a> </div> </body> </html>