Hàm linear-gradient

Hàm linear-gradient xác định một gradient tuyến tính. Được áp dụng cho các thuộc tính thiết lập hình nền: background, background-image hoặc hình ảnh đường viền: border-image, background-image-source.

Cú pháp

cssbộ chọn {
  background: linear-gradient([góc hoặc hướng], màu1 kích_thước1, màu2 kích_thước2...);
}

Giá trị

Ví dụ . Biến thể đơn giản nhất

Cú pháp:

cssbộ chọn {
  background: linear-gradient(màu bắt đầu, màu kết thúc);
}

Hãy xem ví dụ:

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

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Thêm góc

Cú pháp:

cssbộ chọn {
  background: linear-gradient(góc, màu bắt đầu, màu kết thúc);
}

Hãy xem ví dụ:

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

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Thêm hướng

Thay vì góc, có thể thêm hướng top, left, right, bottom hoặc kết hợp của chúng: top left, top right Trước hướng đặt từ to.

Cú pháp:

cssbộ chọn {
  background: linear-gradient(hướng, màu bắt đầu, màu kết thúc);
}

Hãy xem ví dụ:

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

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Thêm hướng

Hãy chỉ định hướng khác:

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

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Thêm kích thước

Cú pháp:

cssbộ chọn {
  background: linear-gradient(màu1 kích_thước1, màu2 kích_thước2);
}

Trong ví dụ tiếp theo, hành vi sẽ như sau: màu đỏ thuần sẽ từ 0px đến 30px, từ 30px đến 50px sẽ là gradient từ đỏ đến xanh dương, và từ 50px trở đi - xanh dương thuần:

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

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Thêm nhiều hơn 2 màu

Cú pháp:

cssbộ chọn {
  background: linear-gradient(màu1 kích_thước1, màu2 kích_thước2, màu3 kích_thước3...);
}

Trong ví dụ tiếp theo, hành vi sẽ như sau: màu đỏ thuần sẽ từ 0px đến 30px, từ 30px đến 50px sẽ là gradient từ đỏ đến xanh dương, và từ 50px đến 70px - gradient từ xanh dương đến xanh lá, và sau 70px - xanh lá thuần:

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

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Chuyển tiếp đột ngột

Trong ví dụ tiếp theo, hành vi sẽ như sau: màu đỏ thuần sẽ từ 0px đến 30px, xanh dương thuần - từ 30px đến 60px, xanh lá thuần - sau 60px (có thể không cần viết red 0px):

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

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Kích thước cũng có thể được đặt bằng phần trăm

Trong ví dụ tiếp theo, hành vi sẽ như sau: màu đỏ thuần sẽ từ 0% đến 30%, xanh dương thuần - từ 30% đến 60%, xanh lá thuần - sau 60% (có thể không cần viết red 0%):

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

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Ví dụ . Kết hợp với background-size

Trong ví dụ tiếp theo, hành vi sẽ như sau: màu đỏ thuần sẽ từ 0px đến 30px, xanh dương thuần - từ 30px đến 60px, đồng thời tất cả điều này sẽ lặp lại từng đoạn 60px (do background-size: 60px;):

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

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Xem thêm