Đường viền chuyển màu mang lại cảm giác hiện đại và hấp dẫn về mặt hình ảnh cho các thành phần web, khiến chúng trở nên nổi bật. Tuy nhiên, việc đạt được hiệu ứng này trong CSS không hề đơn giản vì border thuộc tính vốn không hỗ trợ độ dốc. Bài viết này tìm hiểu các giải pháp thực tế để triển khai đường viền chuyển màu bằng ba phương pháp khác nhau.
Cú pháp
/* Method 1: Using border-image */
selector {
border-width: 5px;
border-style: solid;
border-image: linear-gradient(direction, color1, color2) 1;
}
/* Method 2: Background and Padding */
.parent {
background: linear-gradient(direction, color1, color2);
padding: border-width;
}
/* Method 3: Pseudo-elements */
selector::before {
content: "";
position: absolute;
inset: -border-width;
background: linear-gradient(direction, color1, color2);
z-index: -1;
}
Cách 1:Sử dụng hình ảnh viền
border-image thuộc tính cho phép bạn đặt độ dốc làm đường viền của phần tử
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-border-box {
width: 300px;
padding: 20px;
text-align: center;
border-width: 5px;
border-style: solid;
border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="gradient-border-box">
This is a gradient border using border-image
</div>
</body>
</html>
A box with a horizontal gradient border transitioning from red to teal appears on the page.
Phương pháp 2:Nền và phần đệm với các phần tử lồng nhau
Phương thức này sử dụng phần tử cha có nền gradient và phần tử con lồng nhau để tạo ảo giác về đường viền
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-parent {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 5px;
display: inline-block;
margin: 20px;
}
.white-child {
background: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="gradient-parent">
<div class="white-child">
Gradient border using background and padding
</div>
</div>
</body>
</html>
A box with a diagonal gradient border (red to teal) created using background and padding appears on the page.
Phương pháp 3:Phần tử giả
Sử dụng ::before phần tử giả cho phép bạn tạo lớp gradient phía sau nội dung chính
<!DOCTYPE html>
<html>
<head>
<style>
.pseudo-border-box {
position: relative;
width: 300px;
padding: 20px;
background: white;
margin: 30px auto;
text-align: center;
}
.pseudo-border-box::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
z-index: -1;
}
</style>
</head>
<body>
<div class="pseudo-border-box">
Gradient border using pseudo-elements
</div>
</body>
</html>
A box with a vertical gradient border (red to teal) created using pseudo-elements appears on the page.
So sánh
Kết luận
Đường viền chuyển màu nâng cao hiệu quả thiết kế giao diện người dùng bằng cách sử dụng ba phương pháp này. Chọn border-image để đơn giản, nền/phần đệm để hỗ trợ phổ quát hoặc các phần tử giả để linh hoạt. Mỗi phương pháp đều mang lại những lợi thế riêng để tạo các phần tử web hiện đại, hấp dẫn về mặt hình ảnh.
