Dần dần theo hướng CSS

Dần dần theo hướng CSS

Dải màu trục tia được định nghĩa bởi tâm của nó.

Để tạo dải màu trục tia, bạn cũng phải định nghĩa ít nhất hai điểm màu.

语法

background-image: radial-gradient(shape size at position, start-color, ... , last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中点。

Dải màu trục tia - điểm màu có khoảng cách đều (mặc định)

Dưới đây là ví dụ về dải màu trục tia có khoảng cách giữa các điểm màu đều:

Ví dụ

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Thử ngay

Dải màu trục tia - điểm màu có khoảng cách khác nhau

Dưới đây là ví dụ về dải màu trục tia có khoảng cách giữa các điểm màu khác nhau:

Ví dụ

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Thử ngay

Thiết lập hình dạng

shape Các tham số định nghĩa hình dạng. Nó có thể chấp nhận giá trị circle hoặc ellipse. Giá trị mặc định là ellipse (椭圆).

Dưới đây là ví dụ về dải màu trục tia hình tròn:

Ví dụ

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Thử ngay

Sử dụng các từ khóa kích thước khác nhau

size Các tham số định nghĩa kích thước của dải màu. Nó có thể chấp nhận bốn giá trị:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Ví dụ

Đã thiết lập các dải màu trục tia với các từ khóa size khác nhau:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Thử ngay

Xuất hiện lại theo hướng trục tia

repeating-radial-gradient() Hàm được sử dụng để xuất hiện lại theo hướng trục tia:

Ví dụ

Xuất hiện lại theo hướng trục tia:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Thử ngay

Thuộc tính CSS 渐变

Bảng dưới đây liệt kê các thuộc tính CSS 渐变:

Thuộc tính Mô tả
background-image Đặt một hoặc nhiều hình ảnh nền cho một yếu tố.