Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Garis adalah garis yang ditarik sekitar elemen (outside the borders) untuk membuat elemen "stand out" .
Properti outline-style menentukan gaya garis.
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS2 |
| sintaks JavaScript: | object .style.outlineStyle="dashed" Try it |
Tips dan Catatan
Garis adalah garis di sekitar elemen. Hal ini ditampilkan sekitar margin dari elemen. Namun, berbeda dengan properti perbatasan.
garis besar bukan merupakan bagian dari dimensi elemen, oleh karena itu lebar dan tinggi sifat elemen tidak mengandung lebar garis besar.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8,0 | 1.5 | 1.2 | 7.0 |
Note: IE8 mendukung properti outline-style hanya jika DOCTYPE ditentukan!.
CSS Syntax
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| none | Menentukan ada garis. Ini adalah default | Mainkan " |
| hidden | Menentukan garis besar tersembunyi | Mainkan " |
| dotted | Menentukan garis putus-putus | Mainkan " |
| dashed | Menentukan garis putus-putus | Mainkan " |
| solid | Menentukan garis yang solid | Mainkan " |
| double | Menentukan outliner ganda | Mainkan " |
| groove | Menentukan beralur garis 3D. Efeknya tergantung pada nilai garis warna | Mainkan " |
| ridge | Menentukan garis bergerigi 3D. Efeknya tergantung pada nilai garis warna | Mainkan " |
| inset | Menentukan garis besar inset 3D. Efeknya tergantung pada nilai garis warna | Mainkan " |
| outset | Menentukan garis awal 3D. Efeknya tergantung pada nilai garis warna | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Mengatur gaya garis menggunakan nilai yang berbeda:
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;} Cobalah sendiri " Pages terkait
CSS tutorial: CSS Outline
Referensi CSS: outline property
Referensi HTML DOM: outlineStyle property