Garis Latar Belakang CSS

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

Garis Latar Belakang CSS

Garis adalah garis yang ditarik di sekeliling elemen, di luar bingkai, untuk menonjolkan elemen.

CSS memiliki atribut garis seperti berikut:

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

Perhatian:GarisBingkaiBebeza! Perbezaannya adalah bahwa garis adalah yang ditarik di luar garis bingkai elemen dan dapat bertemu dengan konten lain. Demikian pula, garis bukan bagian dari ukuran elemen; lebar dan tinggi keseluruhan elemen tidak terpengaruh oleh lebar garis.

Gaya garis CSS

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

  • dotted - Tentukan garis yang terbentuk.
  • dashed - Tentukan garis yang terbentuk.
  • solid - Tentukan garis yang terbentuk.
  • double - Tentukan garis double.
  • groove - Tentukan garis 3D yang menanjak di lubang.
  • ridge - Tentukan garis 3D yang menonjol di lubang.
  • inset - Tentukan garis 3D yang menanjak.
  • outset - Tentukan garis 3D yang menonjol.
  • tidak ada - Tentukan garis yang tidak ada.
  • tersembunyi - Tentukan garis yang disembunyikan.

Contoh berikut menunjukkan nilai outline-style yang berbeza:

Contoh

Pertunjukan gaya garis yang berbeza:

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:

Kontur belakang titik.

Kontur belakang gurun.

Kontur belakang serupa.

Kontur belakang berdua.

Kontur belakang kebulatan 3D. Effek ini tergantung pada nilai outline-color.

Kontur belakang kecoklatan 3D. Effek ini tergantung pada nilai outline-color.

Kontur belakang kebulatan 3D. Effek ini tergantung pada nilai outline-color.

Kontur belakang kecoklatan 3D. Effek ini tergantung pada nilai outline-color.

Coba sendiri

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