CSS Outline Properti
Garis adalah garis yang ditarik sekitar elemen - luar perbatasan. Hal ini dapat digunakan untuk membuat elemen "stand out" .
CSS outline properti menentukan gaya, warna, dan lebar garis.
Elemen ini memiliki batas hitam tipis dan garis ganda yang 10px lebar dan hijau.
CSS Outline
Sebuah outline adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "stand out" .
Namun, outline properti berbeda dengan properti perbatasan - The outline BUKAN bagian dari dimensi elemen ini; Total lebar elemen dan tinggi tidak terpengaruh oleh lebar garis besar.
Outline Gaya
The outline-style properti menentukan gaya garis besar.
The outline-style properti dapat memiliki salah satu dari nilai berikut:
-
dotted- Mendefinisikan garis putus-putus -
dashed- Mendefinisikan garis putus-putus -
solid- Mendefinisikan garis yang solid -
double- Mendefinisikan garis ganda -
groove- Mendefinisikan beralur garis 3D. Efeknya tergantung pada nilai garis warna -
ridge- Mendefinisikan garis bergerigi 3D. Efeknya tergantung pada nilai garis warna -
inset- Mendefinisikan garis inset 3D. Efeknya tergantung pada nilai garis warna -
outset- Mendefinisikan garis awal 3D. Efeknya tergantung pada nilai garis warna -
none- Mendefinisikan ada garis -
hidden- Mendefinisikan garis tersembunyi
Contoh berikut pertama menetapkan perbatasan hitam tipis di sekitar masing-masing <p> elemen, maka hal itu menunjukkan berbeda outline-style nilai-nilai:
Contoh
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Hasil:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Cobalah sendiri "  | Catatan: Tidak ada sifat CSS garis OTHER dijelaskan di bawah akan memiliki efek APAPUN kecuali outline-style properti diatur! |
|---|
garis Warna
The outline-color properti digunakan untuk mengatur warna garis.
warna dapat diatur oleh:
- nama - menentukan nama warna, seperti "red"
- RGB - menentukan nilai RGB, seperti "rgb(255,0,0)"
- Hex - menentukan nilai hex, seperti "#ff0000"
- invert - melakukan inversi warna (yang menjamin bahwa garis yang terlihat, terlepas dari latar belakang warna)
Contoh
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Hasil:
A colored outline.
garis Lebar
The outline-width properti menentukan lebar garis besar.
Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em , dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Contoh
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Hasil:
A thick outline.
A thinner outline.
Outline - properti Steno
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti outline individu dalam satu properti.
The outline properti adalah properti singkatan untuk properti outline individu berikut:
-
outline-width -
outline-style(wajib) -
outline-color
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »
Semua CSS Outline Properti
| Milik | Deskripsi |
|---|---|
| outline | Set semua properti outline dalam satu deklarasi |
| outline-color | Mengatur warna garis |
| outline-offset | Menentukan ruang antara garis dan tepi atau border suatu elemen |
| outline-style | Set gaya garis |
| outline-width | Set lebar garis |