Itu CSS properti outline adalah properti yang membingungkan. Ketika Anda pertama kali mempelajarinya, sulit untuk memahami bagaimana hal itu bahkan sangat berbeda dari properti perbatasan. W3C menjelaskannya memiliki perbedaan berikut:
- Garis besar tidak memakan tempat.
- Garis besar mungkin tidak berbentuk persegi panjang.
Garis Besar Tidak Mengambil Tempat
Pernyataan ini, dengan sendirinya, membingungkan. Bagaimana sebuah objek di halaman Web Anda tidak menempati ruang di halaman Web? Tetapi jika Anda menganggap halaman Web Anda seperti bawang, setiap item pada halaman mungkin berlapis di atas item lain. Properti outline tidak memakan tempat karena selalu ditempatkan di atas kotak elemen.
Saat kerangka ditempatkan di sekitar elemen, itu tidak berpengaruh pada bagaimana elemen itu diletakkan di halaman. Itu tidak mengubah ukuran atau posisi elemen. Jika Anda meletakkan garis besar pada sebuah elemen, itu akan memakan jumlah ruang yang sama seperti jika Anda tidak memiliki garis besar elemen itu. Ini tidak benar untuk
berbatasan. Batas pada elemen ditambahkan ke lebar dan tinggi luar elemen. Jadi jika Anda memiliki gambar yang lebarnya 50 piksel, dengan batas 2-piksel, akan memakan waktu 54 piksel (2 piksel untuk setiap batas sisi). Gambar yang sama dengan garis 2-piksel hanya akan mengambil lebar 50 piksel di halaman Anda, garis besar akan ditampilkan di tepi luar gambar.Garis Besar Mungkin Tidak Persegi Panjang
Sebelum Anda mulai berpikir "keren, sekarang saya bisa menggambar lingkaran," pikirkan lagi. Pernyataan ini memiliki arti yang berbeda dari yang mungkin Anda pikirkan. Saat Anda meletakkan batas pada suatu elemen, browser menafsirkan elemen tersebut seolah-olah itu adalah satu kotak persegi panjang raksasa. Jika kotak terbelah menjadi beberapa baris, browser hanya membiarkan tepinya terbuka karena kotak tidak tertutup. Seolah-olah browser melihat perbatasan dengan layar lebar tak terhingga — cukup lebar untuk perbatasan itu menjadi satu persegi panjang terus menerus.
Sebaliknya, properti outline mempertimbangkan tepi. Jika elemen yang digariskan mencakup beberapa baris, garis akan ditutup di akhir baris dan dibuka kembali di baris berikutnya. Jika memungkinkan, garis besar akan tetap terhubung sepenuhnya juga, menciptakan bentuk non-persegi panjang.
Penggunaan Properti Garis Besar
Salah satu kegunaan terbaik dari properti outline adalah untuk menyorot istilah pencarian. Banyak situs melakukan ini dengan warna latar belakang, tetapi Anda juga dapat menggunakan properti outline dan tidak perlu khawatir tentang menambahkan spasi ekstra pada halaman Anda.
Properti outline-color menerima istilah "invert" yang membuat warna outline kebalikan dari latar belakang saat ini. Ini memungkinkan Anda untuk menyorot elemen pada halaman Web dinamis tanpa perlu tahu apa warna yang digunakan.
Anda juga dapat menggunakan properti outline untuk menghapus garis putus-putus di sekitar tautan aktif. Artikel ini dari CSS-Trik menunjukkan bagaimana hapus garis putus-putus.