Sử dụng hiệu ứng chuyển màu dạng hình nón để tạo đường viền thú vị

Bạn có thể sử dụng hiệu ứng chuyển màu hình nón để tạo một số hiệu ứng thú vị, chẳng hạn như ví dụ về đường viền đẹp mắt này.

CodePen này do Adam Argyle tạo ra, ban đầu được chia sẻ qua thông báo này trên Twitter, cho thấy cách sử dụng hiệu ứng chuyển màu hình nón để tạo đường viền.

.conic-gradient-border {
 
border: 25px solid;
 
border-image-slice: 1;
 
border-image-source: conic-gradient(
    hsl
(100 100% 60%),
    hsl
(200 100% 60%),
    hsl
(100 100% 60%)
 
);
}

Terry Mun đã творчески tạo nhánh codepen của Adam và tạo ra CodePen này. Di chuột qua phần tử này và bạn sẽ thấy hiệu ứng chuyển màu thay đổi, nhờ một chút JavaScript cập nhật thuộc tính tuỳ chỉnh CSS lưu trữ góc xoay.

Các ví dụ này sử dụng thuộc tính border-image-source. Thuộc tính này đặt hình ảnh nguồn dùng để tạo đường viền của một phần tử. Giống như các thuộc tính khác chấp nhận giá trị hình ảnh, mọi loại chuyển màu CSS cũng hợp lệ.

border-image-source

Hỗ trợ trình duyệt

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Nguồn

Chuyển màu hình nón