Garis besar - Trik CSS | CSS Almanac 2025

The outlineharta di CSS menarik garis di sekeliling luar unsur. Ia serupa dengan sempadan kecuali:

Selalu berlaku di semua sisi, anda tidak dapat menentukan sisi tertentu
Itu bukan bahagian dari model kotak, jadi itu tidak akan mempengaruhi kedudukan elemen atau elemen yang berdekatan (bagus untuk debugging!)

Fakta-fakta kecil yang lain termasuk bahawa ia tidak menghormati radius sempadan (masuk akal saya rasa ia bukan sempadan) dan tidak selalu segi empat tepat. Sekiranya garis besar mengelilingi elemen sebaris dengan ukuran fon yang berbeza, misalnya, Opera akan melukis kotak berperingkat di sekitarnya.

Ia sering digunakan untuk alasan kebolehcapaian, untuk menekankan pautan ketika dilampirkan tanpa menjejaskan kedudukan dan dengan cara yang berbeza daripada mengarahkan.

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

Shorthand

outline: ( || || ) | inherit

Ia memerlukan sifat yang sama dengan sempadan, tetapi dengan "garis besar-" sebagai gantinya.

Singkatan di atas boleh ditulis:

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

Catatan

Anda tidak dapat menetapkan garis besar hanya pada satu (atau dua, atau tiga) sisi elemen. Semua sisi sahaja. Tidak ada perkara seperti outline-top, outline-right, outline-bottom, atau outline-leftseperti ada dengan border.
Cuba buka konsol di mana-mana laman web dan jalankan document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- anda akan melihat banyak struktur laman web seperti itu.
outlinedigunakan untuk :focusgaya secara lalai. Ingatlah jika anda pernah membuang outlinegaya, seperti a:focus ( outline: 0; ), anda perlu menambahkannya kembali menggunakan beberapa jenis gaya visual yang lain.