CSS lặp lại Gradients - Thủ thuật CSS

Việc lặp lại các gradient là một mẹo nhỏ mà chúng ta có thể làm với việc sử dụng sáng tạo color-stopscác ký hiệu linear-gradient()và radial-gradient()ký hiệu, và mang nó đến cho chúng ta.

Ý tưởng là chúng ta có thể tạo các mẫu từ các gradient mà chúng ta tạo ra và cho phép chúng lặp lại vô hạn.

So sánh một gradient tuyến tính (trái) với một gradient tuyến tính lặp lại (phải).

Có một mẹo, với các gradient không lặp lại, để tạo gradient theo cách mà nếu nó là một hình chữ nhật nhỏ, nó sẽ xếp hàng với các phiên bản hình chữ nhật nhỏ khác của chính nó để tạo ra một mẫu lặp lại. Vì vậy, về cơ bản tạo ra gradient đó và thiết lập background-sizeđể tạo ra hình chữ nhật nhỏ bé đó. Điều đó giúp bạn dễ dàng tạo các đường sọc, sau đó bạn có thể xoay hoặc bất cứ thứ gì.

Cú pháp

Có ba loại gradient lặp lại, hai trong số đó hiện được hỗ trợ trong thông số kỹ thuật chính thức và một loại nằm trong bản nháp đang hoạt động hiện tại.

Cú pháp cho mỗi ký hiệu giống như kiểu gradient liên quan của nó. Ví dụ: repeating-linear-gradient()theo cùng một cú pháp như linear-gradient().

Lặp lại Gradient	Ký hiệu liên quan	Được hỗ trợ?
`repeating-linear-gradient()`	`linear-gradient()`	Đúng
`repeating-radial-gradient`	`radial-gradient()`	Đúng
`repeating-conic-gradient`	`conic-gradient()`	Không

Nơi gradient lặp lại được xác định bởi điểm dừng màu cuối cùng . Nếu mà tại 20px, kích thước của gradient (mà sau đó lặp đi lặp lại) là một 20pxbằng 20pxvuông. Điều này cũng đúng nếu có nhiều màu được xâu chuỗi vào mẫu. Màu cuối cùng với điểm dừng cuối cùng là những gì xác định kích thước và vị trí của lặp lại.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Xem Pen lAkyo của Chris Coyier (@chriscoyier) trên CodePen.

Tương tự với radial:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Xem Những bài học về bút tích của Chris Coyier (@chriscoyier) trên CodePen.

Hỗ trợ trình duyệt

Gradient lặp lại hiện được hỗ trợ trình duyệt tuyệt vời. Điều đó nói rằng, chúng tôi chỉ nói về các gradient tuyến tính và xuyên tâm tại thời điểm viết bài này vì gradient hình nón vẫn là một tính năng được đề xuất trong bản thảo làm việc Cấp 4 của đặc điểm kỹ thuật. Đây là hy vọng chúng tôi sẽ thấy sự chấp nhận rộng rãi khi nó đạt được đề xuất ứng viên.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.