Trang này được dịch bởi Cloud Translation API.

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 có dạng conic để 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 tạo Argyle, ban đầu được chia sẻ qua bài đăng này tweet trên Twitter, cho biết cách sử dụng conic chuyển màu sang 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 một cách sáng tạo đã phân nhánh Bút mã của Adam và đã tạo ra điều này CodePen. Di chuột qua và bạn sẽ thấy sự thay đổi về độ dốc, nhờ vào 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 phương pháp border-image-source thuộc tính này. Thuộc tính này đặt hình ảnh nguồn được dùng để tạo đường viền. Giống như các thuộc tính khác chấp nhận giá trị hình ảnh, bất kỳ độ dốc CSS nào cũng hợp lệ.

`border-image-source`

Hỗ trợ trình duyệt

Nguồn

Chuyển màu dạng hình tròn

Hỗ trợ trình duyệt

Nguồn