Perekomendan kursus:

Fungsi CSS var()

Definisi dan penggunaan CSS var() Fungsi digunakan untuk mengeksport nilai variabel CSS.

Contoh

Contoh 1

Pertama, deklarasikan variabel global bernama --main-bg-color, kemudian gunakan dalam table gaya. var() Fungsi untuk mengeksport nilai variabel:

:root {
  --main-bg-color: korral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Cuba sendiri

Contoh 2

Penggunaan lain var() Contoh penggunaan mengeksport beberapa nilai variabel CSS:

:root {
  --main-bg-color: korral;
  --main-txt-color: biru;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Cuba sendiri

CSS 语法

var(--name, value)
Nilai Keterangan
--name Diperlukan. Nama variabel (mesti bermula dengan dua tanda hubung).
value Pilihan. Nilai cadangan (jika variabel tidak ditemui).

Butir teknikal

Versi: CSS3

Pendukung pereka

Teks di dalam jadual menunjukkan versi pereka penuh yang mendukung fungsi itu.

Chrome Edge Firefox Safari Opera
49 15 31 9.1 36

Halaman Berhubungan

Panduan:Variabel CSS