Garis besar - Trik CSS | CSS Almanak 2024

The outlineproperti di CSS menarik garis di sekitar bagian luar elemen. Ini mirip dengan perbatasan kecuali:

Itu selalu berputar di semua sisi, Anda tidak dapat menentukan sisi tertentu
Ini bukan bagian dari model kotak, jadi tidak akan mempengaruhi posisi elemen atau elemen yang berdekatan (bagus untuk debugging!)

Fakta kecil lainnya termasuk bahwa itu tidak menghormati radius-perbatasan (masuk akal saya kira karena itu bukan perbatasan) dan tidak selalu persegi panjang. Jika garis luar mengelilingi elemen sebaris dengan ukuran font yang berbeda, misalnya, Opera akan menggambar kotak terhuyung-huyung di sekelilingnya.

Ini sering digunakan untuk alasan aksesibilitas, untuk menekankan tautan saat diberi tab tanpa memengaruhi pemosisian dan dengan cara yang berbeda dari arahkan kursor.

a:focus ( outline: 1px dashed red; )

Steno

outline: ( || || ) | inherit

Dibutuhkan properti yang sama seperti border, tetapi dengan "outline-" sebagai gantinya.

Singkatan di atas bisa saja ditulis:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Catatan

Anda tidak dapat mengatur garis besar hanya pada satu (atau dua, atau tiga) sisi elemen. Semua sisi saja. Tidak ada hal seperti outline-top, outline-right, outline-bottom, atau outline-leftseperti ada dengan border.
Coba buka konsol di situs web mana pun dan jalankan document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- Anda akan melihat banyak struktur situs seperti itu.
outlinedigunakan untuk :focusgaya secara default. Ingatlah jika Anda pernah menghapus outlinegaya, misalnya a:focus ( outline: 0; ), Anda perlu menambahkannya kembali menggunakan jenis gaya lain yang berbeda secara visual.