Hàm repeating-radial-gradient

Hàm repeating-radial-gradient thiết lập một gradient xuyên tâm lặp lại. Điều này có nghĩa là chúng ta xác định một mẫu gradient nhất định, ví dụ, từ 0px đến 10px - gradient từ màu đỏ sang màu xanh lơ và gradient này sẽ lặp lại trên toàn bộ khối: từ 0px đến 10px, từ 10px đến 20px, từ 20px đến 30px và cứ thế tiếp tục.

Hàm hoạt động với các tham số giống như radial-gradient, chỉ khác biệt ở hiệu ứng lặp lại. Để biết các tham số được chấp nhận, hãy xem mô tả của radial-gradient.

Cú pháp

cssbộ chọn {
  background: repeating-radial-gradient([hình dạng loại vị trí], màu1 kích_thước1, màu2 kích_thước2...);
}

Ví dụ

Các vòng tròn đồng tâm:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Ví dụ

Các hình elip đồng tâm:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Ví dụ

Đặt các vòng tròn đồng tâm không ở giữa, mà ở cạnh:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Xem thêm