Tutorial CSS kali ini menjelaskan Pengaturan Outline HTML dengan CSS. Outline yang sangat mirip dengan border, tetapi ada beberapa perbedaan utama
Tutorial CSS kali ini menjelaskan Pengaturan Outline HTML dengan CSS. Outline yang sangat mirip dengan border, tetapi ada beberapa perbedaan utama:
- Outline tidak mengambil ruang.
- Outline tidak harus persegi panjang.
- Outline selalu sama di semua sisi; Anda tidak dapat menentukan nilai yang berbeda untuk sisi yang berbeda dari unsur.
CATATAN - Properti outline tidak didukung oleh IE 6 atau Netscape 7.
Anda dapat mengatur properti outline berikut dengan menggunakan CSS.
- Properti outline-width digunakan untuk mengatur lebar garis besar.
- Properti outline-style digunakan untuk mengatur gaya garis untuk garis besar.
- Properti outline-color yang digunakan untuk mengatur warna garis.
- Properti outline digunakan untuk mengatur semua di atas tiga properti dalam sebuah pernyataan tunggal.
Properti outline-width
Properti outline-width menentukan lebar outline yang akan ditambahkan ke kotak. nilainya harus panjang atau salah satu dari nilai thin, medium, atau thick, seperti atribut border-width.
Sebuah lebar nol piksel berarti tidak ada outline.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="outline-width:thin; outline-style:solid;"> This text is having thin outline. </p> <br /> <p style="outline-width:thick; outline-style:solid;"> This text is having thick outline. </p> <br /> <p style="outline-width:5px; outline-style:solid;"> This text is having 5x outline. </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Property outline-style
Properti outline-style menentukan style untuk garis (solid, dotted, atau dashed) yang terjadi di sekitar elemen. Hal ini dapat mengambil salah satu dari nilai berikut -
- none: No border. (Setara outline-width: 0;)
- solid: Outline adalah garis solid tunggal.
- dotted: Outline adalah serangkaian titik.
- dashed: Outline adalah serangkaian garis pendek.
- double: Outline adalah dua garis padat.
- groove: Outline tampak seolah-olah itu diukir ke dalam halaman.
- ridge: Outline terlihat kebalikan dari alur.
- inset: Outline membuat kotak terlihat seperti itu tertanam di halaman.
- outset: Outline membuat kotak terlihat seperti itu yang keluar dari kanvas.
- hidden: Sama seperti tidak ada.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="outline-width:thin; outline-style:solid;"> This text is having thin solid outline. </p> <br /> <p style="outline-width:thick; outline-style:dashed;"> This text is having thick dashed outline. </p> <br /> <p style="outline-width:5px;outline-style:dotted;"> This text is having 5x dotted outline. </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti outline-color
Properti outline color memungkinkan Anda untuk menentukan warna garis. Nilainya harus berupa nama color, warna hex, atau nilai RGB, seperti dengan warna dan border-color properti.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="outline-width:thin; outline-style:solid;outline-color:red"> This text is having thin solid red outline. </p> <br /> <p style="outline-width:thick; outline-style:dashed;outline-color:#009900"> This text is having thick dashed green outline. </p> <br /> <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)"> This text is having 5x dotted blue outline. </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti outline
Properti outline adalah properti singkatan yang memungkinkan Anda untuk menentukan nilai untuk salah satu dari tiga sifat dibahas sebelumnya dalam urutan apapun tetapi dalam satu pernyataan.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="outline:thin solid red;"> This text is having thin solid red outline. </p> <br /> <p style="outline:thick dashed #009900;"> This text is having thick dashed green outline. </p> <br /> <p style="outline:5px dotted rgb(13,33,232);"> This text is having 5x dotted blue outline. </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
COMMENTS