Properti gaya garis besar CSS

Sebelumnya _ Referensi CSS Lengkap Selanjutnya _

Contoh

Mengatur gaya untuk garis besar:

div {outline-style: dotted;}

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Garis besar adalah garis yang digambar di sekitar elemen, di luar batas, untuk membuat elemen "menonjol".

Properti outline-stylemenentukan gaya kerangka.

Nilai bawaan:	tidak ada
Diwarisi:	tidak
Animasi:	tidak. Baca tentang animasi
Versi: kapan:	CSS2
Sintaks JavaScript:	objek .style.outlineStyle="putus-putus"

Tips dan Catatan

Catatan: Garis besar berbeda dari batas ! Tidak seperti batas, kerangka digambar di luar batas elemen, dan mungkin tumpang tindih dengan konten lain. Juga, garis besar BUKAN merupakan bagian dari dimensi elemen; lebar dan tinggi total elemen tidak terpengaruh oleh lebar kerangka.

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
outline-style	1.0	8.0	1.5	1.2	7.0

Sintaks CSS

Nilai properti

Value	Description	Play it
none	Specifies no outline. This is default
hidden	Specifies a hidden outline
dotted	Specifies a dotted outline
dashed	Specifies a dashed outline
solid	Specifies a solid outline
double	Specifies a double outliner
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value
inset	Specifies a 3D inset outline. The effect depends on the outline-color value
outset	Specifies a 3D outset outline. The effect depends on the outline-color value
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Lebih Banyak Contoh

Contoh

Garis putus-putus:

div {outline-style: dashed;}

Contoh

Garis besar yang solid:

div {outline-style: solid;}

Contoh

Garis besar ganda:

div {outline-style: double;}

Contoh

Garis besar alur:

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

Contoh

Garis besar punggungan:

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

Contoh

Garis besar sisipan:

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

Contoh

Garis besar awal:

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

Contoh

Atur gaya kerangka menggunakan nilai yang berbeda:

p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}