Trình tạo viền gradient động CSS

Viền cầu vồng xoay trông có vẻ đơn giản cho đến khi bạn thực sự thử dựng nó bằng CSS: dùng thuộc tính tùy chỉnh thông thường để nội suy góc trong conic-gradient() không mang lại kết quả hữu ích, vì trình duyệt không biết giá trị đó là góc và không thể nội suy giữa 0deg và 360deg — nó chỉ nhảy cóc. Trình tạo này dùng giải pháp thực sự, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` cho trình duyệt biết chính xác loại giá trị mà thuộc tính tùy chỉnh nắm giữ, nhờ đó mở khóa nội suy mượt mà, thân thiện với GPU thông qua quy tắc @keyframes.

Bản thân vòng là pseudo-element ::before có kích thước lớn hơn hộp (nội suy vào trong bằng cách trừ đi độ dày viền) với background đặt thành `conic-gradient(from var(--border-angle), ...)` vòng lại đến màu đầu tiên để dải quét không có đường nối lộ liễu. Sau đó mask thực hiện công việc định hình thực sự: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` chỉ giữ lại phần khác biệt hình vành khuyên giữa padding-box và content-box, loại bỏ hình chữ nhật gradient đặc ở mọi nơi khác. Phiên bản cũ hơn của Safari `-webkit-mask-composite: xor` thực hiện thao tác giống hệt và được xuất ra cùng thuộc tính chuẩn, do đó hiệu ứng hiển thị nhất quán thay vì âm thầm thất bại trên một engine.

Hỗ trợ border-radius không phải suy nghĩ thêm vào sau — `border-radius: inherit` của pseudo-element có nghĩa là bất kỳ bán kính nào bạn quay số vào hộp sẽ được tự động chuyển sang vòng, do đó một nút hình viên thuốc hoặc thẻ bo tròn sẽ có viền phát sáng bo tròn thay vì các cạnh thẳng tràn ra khỏi góc cong. Hãy kiểm tra trực tiếp: kéo thanh trượt bán kính từ hình chữ nhật sắc nét đến hình viên thuốc hoàn chỉnh và xem vòng ôm theo hình dạng ở mọi bước, đây là chi tiết phân biệt cách triển khai thực sự của kỹ thuật này với ảnh chụp màn hình giả.

Mọi thứ khác trên trang ánh xạ trực tiếp lên mã được tạo: thanh trượt độ dày là bề dày của vòng và inset/padding của pseudo-element, thanh trượt thời lượng là animation-duration của @keyframes, công tắc hướng chỉ đơn giản đảo dấu góc cuối của keyframe (+360deg hoặc -360deg), và mỗi điểm dừng màu là một mục phân tách bằng dấu phẩy bên trong lời gọi conic-gradient(). Toàn bộ chạy trong trình duyệt của bạn, không dùng ảnh, không vòng lặp hoạt ảnh điều khiển bằng JavaScript và không có dịch vụ ngoài — sao chép khối CSS và nó tiếp tục xoay bất cứ nơi nào bạn dán.