Fungsi linear-gradient

Fungsi linear-gradient menentukan gradien linear. Digunakan untuk sifat yang menentukan gambar latar belakang: background, background-image atau gambar sempadan: border-image, background-image-source.

Sintaksis

csspemilih {
  background: linear-gradient([sudut atau arah], warna1 saiz1, warna2 saiz2...);
}

Nilai

Contoh . Pilihan paling mudah

Sintaksis:

csspemilih {
  background: linear-gradient(warna permulaan, warna akhir);
}

Mari lihat contoh:

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

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

Результат:

Contoh . Menambah sudut

Sintaksis:

csspemilih {
  background: linear-gradient(sudut, warna permulaan, warna akhir);
}

Mari lihat contoh:

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

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

Результат:

Contoh . Menambah arah

Selain sudut boleh tambah arah top, left, right, bottom atau gabungannya: top left, top right Sebelum arah diletakkan perkataan to.

Sintaksis:

csspemilih {
  background: linear-gradient(arah, warna permulaan, warna akhir);
}

Mari lihat contoh:

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

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

Результат:

Contoh . Menambah arah

Tentukan arah lain:

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

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

Результат:

Contoh . Menambah saiz

Sintaksis:

csspemilih {
  background: linear-gradient(warna1 saiz1, warna2 saiz2);
}

Dalam contoh berikut kelakuan akan seperti berikut: warna merah tulen akan dari 0px hingga 30px, dari 30px hingga 50px akan gradien dari merah ke biru, dan dari 50px dan hingga akhir - biru tulen:

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

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

Результат:

Contoh . Menambah lebih daripada 2 warna

Sintaksis:

csspemilih {
  background: linear-gradient(warna1 saiz1, warna2 saiz2, warna3 saiz3...);
}

Dalam contoh berikut kelakuan akan seperti berikut: warna merah tulen akan dari 0px hingga 30px, dari 30px hingga 50px akan gradien dari merah ke biru, dan dari 50px hingga 70px - gradien dari biru ke hijau, dan selepas 70px - hijau tulen:

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

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

Результат:

Contoh . Peralihan tajam

Dalam contoh berikut kelakuan akan seperti berikut: warna merah tulen akan dari 0px hingga 30px, biru tulen - dari 30px hingga 60px, hijau tulen - selepas 60px (red 0px boleh juga tidak ditulis):

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

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

Результат:

Contoh . Saiz boleh ditetapkan dalam peratus juga

Dalam contoh berikut kelakuan akan seperti berikut: warna merah tulen akan dari 0% hingga 30%, biru tulen - dari 30% hingga 60%, hijau tulen - selepas 60% (red 0% boleh juga tidak ditulis):

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

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

Результат:

Contoh . Gabungan dengan background-size

Dalam contoh berikut kelakuan akan seperti berikut: warna merah tulen akan dari 0px hingga 30px, biru tulen - dari 30px hingga 60px, dengan semua ini akan berulang sebahagian demi 60px (disebabkan 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;
}

Результат:

Lihat juga