Tạo viền Gradient đẹp mắt trong CSS: Hướng dẫn từng bước

Viền Gradient thêm chạm hiện đại và hấp dẫn về mặt trực quan cho các phần tử web, làm cho chúng nổi bật. Tuy nhiên, đạt được hiệu ứng này trong CSS không đơn giản vì thuộc tính border không hỗ trợ gradient gốc. Bài viết này khám phá ba phương pháp thực tế để triển khai viền gradient.

Cú pháp

/* Phương pháp 1: Sử dụng border-image */
selector {
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(direction, color1, color2) 1;
}

/* Phương pháp 2: Background và Padding */
.parent {
  background: linear-gradient(direction, color1, color2);
  padding: border-width;
}

/* Phương pháp 3: Pseudo-elements */
selector::before {
  content: "";
  position: absolute;
  inset: -border-width;
  background: linear-gradient(direction, color1, color2);
  z-index: -1;
}

Phương pháp 1: Sử dụng border-image

Thuộc tính border-image cho phép bạn đặt gradient làm 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">
  Đây là viền gradient sử dụng border-image
</div>
</body>
</html>

Một hộp với viền gradient ngang chuyển từ đỏ sang xanh ngọc xuất hiện trên trang.

Phương pháp 2: Background và Padding với phần tử lồng nhau

Phương pháp này sử dụng phần tử cha với background gradient và phần tử con lồng nhau để tạo ảo giác 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">
    Viền gradient sử dụng background và padding
  </div>
</div>
</body>
</html>

Một hộp với viền gradient chéo (đỏ sang xanh ngọc) được tạo bằng background và padding xuất hiện trên trang.

Phương pháp 3: Pseudo-elements

Sử dụng pseudo-element ::before cho phép bạn xếp 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">
  Viền gradient sử dụng pseudo-elements
</div>
</body>
</html>

Một hộp với viền gradient dọc (đỏ sang xanh ngọc) được tạo bằng pseudo-elements xuất hiện trên trang.

So sánh

Kết luận

Viền gradient nâng cao thiết kế UI hiệu quả sử dụng ba phương pháp này. Chọn border-image cho sự đơn giản, background/padding cho hỗ trợ phổ biến, hoặc pseudo-elements cho sự linh hoạt. Mỗi cách tiếp cận cung cấp lợi thế độc특 để tạo các phần tử web hiện đại, hấp dẫn về mặt trực quan.