Gradient color border CSS

Khái quát

Có lẻ với bất cứ một lập trình viên nào củng sẽ biết đến border trong CSS. Border trong CSS nó giúp và hổ trợ chúng ta tạo ra những đường viền để design cho trang web. Trước nay mọi người vẩn hay thường sử dụng border một màu sắc. Vậy không biết mọi người dã biết cách tạo ra một gradient border color chỉ với CSS chưa.

Tạo Gradient border color CSS với linear-gradient

div{
    border-style: solid;
     border-width: 10px;
     border-image: radial-gradient(#7D31EA, rgb(250,224,66)) 1;
   }

Hình ảnh minh họa gradient border từ linear-gradient

Với border-style là phong cách tạo kiểu đường viền, solid là dạng phong cách tạo ra một đường thẳng cho border.

Border-width là chiều rộng của đường viền.

Border-image là liên kết nền cho border.

Linear-gradient là phong cách tạo độ chuyển màu sắc theo phương thẳng theo góc 45 độ để tạo ra một hiệu ứng gradient border cho trang web.

Tạo Gradient border color CSS với radial-gradient

div{
    border-style: solid;
     border-width: 10px;
     border-image: radial-gradient(#7D31EA, rgb(250,224,66)) 1;
   }

Hình ảnh minh họa gradient border từ radial-gradient

Củng như liner-gradient thì radial-gradient củng tạo ra một hình nền có độ chuyển màu để tạo ra một hiệu ứng gradient border cho trang web, nhưng ở radial-gradient chúng ta sẽ không khai báo góc quay và hướng di chuyển của màu sắc vì mặc định đây là phong cách tạo ra độ ngã màu từ trung tâm và dần lan ra bên ngoài.

Nguyên lí hoạt động của radial-gradient

Tạo Gradient border color CSS với conic-gradient

div{
    border-style: solid;
     border-width: 10px;
     border-image: conic-gradient(#7D31EA, rgb(250,224,66)) 1;
   }

Hình ảnh minh họa gradient border từ conic-gradient

Củng như liner-gradient thì conic-gradient củng tạo ra một hình nền có độ chuyển màu để tạo ra một hiệu ứng gradient border cho trang web, tuy nhiên một lần nửa, ở conic-gradient chúng ta củng không cần khai báo góc quay của màu sắc vì nó đã có một quy luật sẳn, quy luật ở đây đó là tạo ra một bảng màu bắt đầu theo chìu kim đồng hộ và ngã màu lần lược theo các màu sắc được khai báo cho đến hết một vòng đễ tạo ra một Gradient border color CSS.

Nguyên lí hoạt động của conic-gradient

Truy cập youtube Lùn Dev để xem nhiều hơn

Tổng kết

Vậy là chúng ta hoàn toàn có thể tạo ra hiệu ứng Gradient border color CSS bằng việc sử dụng  border-image và kết hợp với các thuộc tính như liner-gradient, radial-gradient, conic-gradient thay vì phải tạo ra một hình ảnh và làm giả thành gradient border color.