Bạn có thể dùng chuyển màu conic để tạo một số hiệu ứng thú vị, chẳng hạn như ví dụ về đường viền tuyệt đẹp này.
CodePen này do Adam Argyle tạo ra, ban đầu được chia sẻ qua tweet này trên Twitter, cho biết cách sử dụng hiệu ứng chuyển màu để 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 đã chia đôi tài sản của Adam và tạo ra CodePen này. Di chuột qua phần tử đó và bạn sẽ thấy sự thay đổi độ dốc, nhờ một chút JavaScript cập nhật thuộc tính tuỳ chỉnh CSS lưu trữ góc xoay.
Những 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 kiểu chuyển màu CSS cũng hợp lệ.
border-image-source
Chuyển màu hình nón