Sử dụng (các) phần tử giả
Bạn có thể định vị một phần tử giả sao cho nó ở phía sau phần tử và lớn hơn, tạo hiệu ứng đường viền với nền của chính nó hoặc nhỏ hơn và bên trong (nhưng hãy đảm bảo rằng nội dung được đặt ở trên cùng).
Phần tử cần nhiều đường viền phải có đường viền riêng và vị trí tương đối.
.borders ( position: relative; border: 5px solid #f00; )Đường viền phụ được thêm một phần tử giả. Nó được thiết lập với vị trí tuyệt đối và chèn với các giá trị trên / trái / dưới / phải. Điều này cũng sẽ có đường viền và được giữ bên dưới nội dung (ví dụ: bảo toàn khả năng lựa chọn của văn bản và khả năng nhấp của liên kết) bằng cách đặt cho nó một giá trị z-index âm. Cẩn thận với chỉ số z âm, nếu phần tử này nằm trong một phần tử khác có màu nền của chính nó, thì điều này có thể không hoạt động.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Xem Pen gbgRqZ của Chris Coyier (@chriscoyier) trên CodePen.
Bạn cũng có thể tạo đường viền thứ ba bằng cách sử dụng :afterlớp giả. Đặc biệt lưu ý rằng Firefox 3 (trước 3.6) cố định điều này bằng cách hỗ trợ :aftervà :before, nhưng không cho phép chúng được định vị tuyệt đối (vì vậy nó trông kỳ lạ).
Sử dụng dàn ý
Mặc dù nó hạn chế hơn một chút so với đường viền (đi xung quanh toàn bộ phần tử bất kể là gì), phác thảo là một đường viền bổ sung miễn phí.
.borders ( border: 5px solid blue; outline: 5px solid red; )Sử dụng bóng hộp
Bạn có thể sử dụng box-shadow để tạo hiệu ứng đường viền, bằng cách làm cho bóng đổ bù và có 0 độ mờ. Ngoài ra, bằng cách phân tách các giá trị bằng dấu phẩy, bạn có thể có bao nhiêu “đường viền” tùy thích:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Xem Pen xbgreX của Chris Coyier (@chriscoyier) trên CodePen.
Sử dụng nền được cắt bớt
Bạn có thể làm cho nền của một phần tử dừng lại trước phần đệm. Theo cách đó, một đường viền bình thường của các yếu tố có thể trông giống như đường viền kép.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Trên một đầu vào:
Xem hiệu ứng Pen Double border của Chris Coyier (@chriscoyier) trên CodePen.