Các cách tạo nhiều Border với CSS3
Bài viết này hướng dẫn cách tạo nhiều khung viền (border) với thuộc tính box-shadow, bạn vẫn có thể kết hợp với thuộc tính border hoặc outline nếu muốn.
Thuộc tính box-shadow
Bạn có thể tạo bao nhiêu viền tùy ý với thuộc tính này, xem ví dụ sau.
Cách làm
.multi-border {
box-shadow:
0 0 0 5px hsla(175, 70%, 40%, 1),
0 0 0 10px hsla(150, 70%, 40%, 1),
0 0 0 15px hsla(75, 70%, 40%, 1),
0 0 0 20px hsla(25, 70%, 40%, 1),
0 0 0 25px hsl(0, 0%, 100%);
}Với ví dụ này, viền sẽ có chiều rộng 5px và màu sắc HSL, bạn có thể tham khảo tại đây.
Thuộc tính border và outline
Nếu bạn chỉ muốn có 2 đường viền, bạn chỉ cần sử dụng 2 thuộc tính này là đủ, ví dụ.
Cách làm
.multi-border {
border: 5px solid #73D2F6;
outline: 5px solid #FFB21E;
}Lưu ý: Cách này chỉ sử dụng được cho hình vuông (không có border-radius).
Thuộc tính background-clip
Cách này được sử dụng nếu bạn muốn làm như sau.
Cách làm
.multi-border {
padding: 3px;
background: #FF4D4D;
border: 3px solid #FF4D4D;
background-clip: content-box;
}Tham khảo dịch vụ thiết kế website của chúng tôi.
Thiết Kế Website
Website thu hút thêm nhiều khách hàng với chi phí thấp, giúp đẩy mạnh hoạt động bán hàng mọi lúc mọi nơi, triển khai các chiến lược marketing hiệu quả và đặc biệt là nâng tầm uy tín, giá trị thương hiệu và giảm chi phí kinh doanh.
Chúc các bạn thành công!
