Gradien Berulang CSS - Trik CSS

Mengulangi kecerunan mengambil helah kita sudah boleh lakukan dengan penggunaan kreatif color-stopskepada linear-gradient()dan radial-gradient()notasi, dan pandai membuat dalam untuk kita.

Ideanya ialah kita dapat membuat corak daripada kecerunan yang kita buat dan membiarkannya berulang tanpa henti.

Membandingkan kecerunan linear (kiri) dengan kecerunan linear berulang (kanan).

Terdapat muslihat, dengan kecerunan yang tidak berulang, untuk membuat kecerunan sedemikian rupa sehingga jika itu adalah sebuah segi empat kecil yang kecil, ia akan sejajar dengan versi segi empat kecil kecil itu sendiri untuk membuat corak berulang. Oleh itu, buatlah kecerunan itu dan tetapkan background-sizeuntuk menjadikan segi empat kecil itu. Itu menjadikannya mudah untuk membuat jalur, yang kemudian anda boleh putar atau apa sahaja.

Sintaks

Terdapat tiga jenis kecerunan berulang, dua daripadanya kini disokong dalam spesifikasi rasmi dan satu lagi dalam draf kerja semasa.

Sintaks untuk setiap notasi adalah sama dengan jenis kecerunan yang berkaitan. Sebagai contoh, repeating-linear-gradient()mengikuti sintaks yang sama dengan linear-gradient().

Mengulangi Kecerunan	Notasi Berkaitan	Disokong?
`repeating-linear-gradient()`	`linear-gradient()`	Ya
`repeating-radial-gradient`	`radial-gradient()`	Ya
`repeating-conic-gradient`	`conic-gradient()`	Tidak

Di mana pengulangan kecerunan ditentukan oleh pemberhentian warna akhir . Jika yang di 20px, saiz kecerunan (yang kemudian mengulanginya) adalah 20pxoleh 20pxpersegi. Perkara yang sama berlaku jika terdapat beberapa warna yang dirantai pada corak. Warna akhir dengan penghentian terakhir adalah yang menentukan ukuran dan lokasi ulangan.

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

Lihat Pen lAkyo oleh Chris Coyier (@chriscoyier) di CodePen.

Sama dengan radial:

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

Lihat Pen Gradien Pen berulang oleh Chris Coyier (@chriscoyier) di CodePen.

Sokongan Penyemak Imbas

Gradien berulang kini mendapat sokongan penyemak imbas yang hebat. Yang mengatakan, kita hanya bercakap mengenai kecerunan linear dan radial pada saat penulisan ini kerana kecerunan kerucut masih merupakan ciri yang dicadangkan dalam draf kerja Tahap 4 spesifikasi. Kami berharap dapat melihat penggunaan yang luas setelah mencapai cadangan calon.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.