👋 Chào mừng đến với Blog - Thành Nam Nguyễn

Tạo border gradient trong CSS

Tạo border gradient trong CSS

Thành Nam Nguyễn's photo
Thành Nam Nguyễn
27/11/2023·

2 phút đọc

Front-end

CSS là một ngôn ngữ quan trọng trong phát triển web, không chỉ giúp xác định cấu trúc và kiểu dáng cho trang web mà còn cung cấp nhiều hiệu ứng đồ họa để làm cho trang web trở nên sinh động hơn. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng border gradient, giúp các phần tử trang web trở nên ấn tượng và thú vị hơn.

Bước 1: Chọn phần tử cần áp dụng hiệu ứng

Trước tiên, hãy xác định phần tử HTML mà bạn muốn thêm hiệu ứng border gradient. Điều này có thể là bất kỳ phần tử nào trên trang web, chẳng hạn như hộp thoại, nút, hoặc là phần tử div.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Gradient Border</title>
  </head>
  <body>
    <div class="gradient-border-element">
      <!-- Nội dung ở đây -->
    </div>
  </body>
</html>

Bước 2: Áp dụng CSS

Tiếp theo, sử dụng CSS để tạo hiệu ứng border gradient cho phần tử đã chọn. Dưới đây là code CSS cơ bản để tạo gradient border:

.gradient-border-element {
  border: 3px solid; /* Độ rộng và kiểu border */
  border-image: linear-gradient(to right, #ff7e5f, #feb47b); /* Tạo gradient */
  border-image-slice: 1; /* Chia border thành phần */
  padding: 30px; /* Để tránh việc nội dung chạm vào border */
}

  • border: Xác định độ rộng và kiểu border.

  • border-image: Sử dụng linear-gradient để tạo gradient màu sắc. Điều chỉnh hướng (to right) và thay đổi màu sắc theo ý muốn.

  • border-image-slice: Chia border thành các phần.

👉 Tìm hiểu thêm thuộc tínhborder-image-slice

Bước 3: Tùy chỉnh theo ý muốn

Bạn có thể tùy chỉnh mã CSS theo ý muốn để đáp ứng nhu cầu thiết kế cụ thể của bạn. Thử nghiệm với các giá trị khác nhau của border, border-image, và border-image-slice để tạo ra hiệu ứng border gradient phù hợp nhất với trang web của bạn.

Demo

https://codepen.io/namnguyenthanhwork/pen/JjzoqEv

Kết luận

Như vậy, bạn đã học cách tạo hiệu ứng border gradient trong CSS để làm cho trang web của mình trở nên độc đáo và thú vị hơn. Hãy thử nghiệm và tùy chỉnh để tạo ra hiệu ứng border phù hợp với ý tưởng thiết kế của bạn.

frontendCSS