Garis Latar Belakang CSS

Elemen ini memiliki garis pinggir hitam dan garis kontur biru, lebar 10px.

Garis Latar Belakang CSS

Garis-garis adalah garis yang disesuaikan di sekeliling elemen, di luar garis pinggir, untuk menonjolkan elemen.

CSS memiliki atribut garis seperti berikut:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Perhatian:Garis-garis denganBatasBerbeda! Perbedaan di tempat itu adalah garis disesuaikan di luar garis pinggir elemen dan mungkin bertindak重叠。Dan juga, garis ini bukan bagian dari ukuran elemen; lebar dan tinggi keseluruhan elemen tidak dipengaruhi oleh lebar garis.

Gaya-garis Kirty CSS

Atribut outline-style menentukan gaya garis dan dapat diatur seperti berikut:

  • dotted - Definisi garis yang berdampingan.
  • dashed - Definisi garis yang terpisah.
  • solid - Definisi garis yang lurus.
  • double - Definisi garis yang berdampingan.
  • groove - Definisi garis 3D yang berdinding ke dalam.
  • ridge - Definisi garis 3D yang berdinding ke luar.
  • inset - Definisi garis 3D yang bulat ke dalam.
  • outset - Definisi garis 3D yang bulat ke luar.
  • tidak ada - Definisi tanpa garis.
  • tersembunyi - Definisi garis yang disembunyikan.

Contoh berikut menunjukkan nilai outline-style yang berbeda:

Contoh

Demi menunjukkan gaya-garis yang berbeda:

p.dotted {gaya-garis: dotted;}
p.dashed {gaya-garis: dashed;}
p.solid {gaya-garis: solid;}
p.double {gaya-garis: double;}
p.groove {gaya-garis: groove;}
p.ridge {gaya-garis: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Hasil:

Garis Titik

Garis Serupa

Garis Tegak

Garis Dua Garis

Garis Dalam Gigit 3D. Efek ini tergantung dari nilai outline-color.

Garis Gigit 3D. Efek ini tergantung dari nilai outline-color.

Garis Dalam 3D. Efek ini tergantung dari nilai outline-color.

Garis Buram 3D. Efek ini tergantung dari nilai outline-color.

Coba Sendiri

Perhatian:kecuali yang diatur outline-style Aturan, kecuali properti kontur lainnya (yang akan dijelaskan di bab berikutnya) tidak akan berfungsi!