Outline CSS
Outline adalah garis yang digambar di sekitar elemen, DI LUAR border untuk membuat elemen “menonjol”.
CSS memiliki properti outline sebagai berikut:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Catatan: Outline berbeda dengan border! Tidak seperti border, kerangka digambar di luar batas elemen dan mungkin tumpang tindih dengan konten lainnya. Juga, outline BUKAN merupakan bagian dari dimensi elemen; lebar dan tinggi total elemen tidak dipengaruhi oleh lebar garis luar
Style Outline di CSS
Properti outline-style menentukan gaya outline dan memiliki salah satu nilai berikut:
dotted – Mendefinisikan garis putus-putusdashed – Mendefinisikan garis putus-putussolid – Mendefinisikan garis yang soliddouble – Mendefinisikan garis gandagroove – Mendefinisikan garis beralur 3Dridge – Mendefinisikan garis bergerigi 3Dinset – Mendefinisikan garis inset 3Doutset– Mendefinisikan garis awal 3Dnone – Tidak mendefinisikan garis besarhidden – Mendefinisikan garis tersembunyi
Contoh berikut menunjukkan nilai outline-style yang berbeda:
Contoh
Demonstrasi outline style yang berbeda:
<!DOCTYPE html> <html> <head> <style> p {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;} </style> </head> <body> <h2>Properti outline style</h2> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class = "groove"> A groove outline. Efeknya bergantung pada nilai warna border. </p> <p class = "ridge"> A ridge outline. Efeknya bergantung pada nilai warna border. </p> <p class = "inset"> A inset outline. Efeknya bergantung pada nilai warna border. </p> <p class = "outset"> A outset outlin. Efeknya bergantung pada nilai warna border. </p> </body> </html>
Catatan: Tak satu pun dari properti outline lainnya akan memiliki efek APA PUN kecuali properti outline-style disetel!
