The outline-offsetproperti di CSS offset garis didefinisikan dari tepi perbatasan sebuah elemen dengan jumlah yang ditentukan. Garis besar, yang berbeda dari bingkai, tidak menggunakan ruang apa pun pada halaman (seperti elemen yang benar-benar diposisikan) sehingga kerangka dapat diimbangi dalam jumlah berapa pun dan tidak akan memengaruhi posisi atau tata letak elemen di sekitarnya.
.example ( outline: solid 2px blue; outline-offset: 10px; )Kerangka yang ditentukan menggunakan outlineproperti sering kali digunakan sebagai cincin fokus, untuk aksesibilitas. Karenanya, outline-offsetproperti memungkinkan Anda mengubah posisi cincin fokus.
Nilai
outline-offset menerima satu jenis nilai, panjang, yang dapat berupa:
0(default)- Panjang valid lainnya dengan unit tertentu (termasuk nilai negatif)
Perhatikan bahwa outline-offset, seperti outline-width, tidak menerima nilai persentase.
Penempatan Garis Besar
Secara default, kerangka elemen digambar tepat di luar batas (atau tepat di luar tempat batas akan digambar jika batas ditentukan). Oleh karena itu, secara teknis dimungkinkan untuk menggabungkan garis besar dan batas untuk efek dua batas:
Dari sana, outline-offsetdapat digunakan untuk mengubah posisi garis tepi relatif terhadap tepi tepi. Coba demo di bawah ini yang memungkinkan Anda untuk secara interaktif mengubah nilai offset garis tepi menggunakan penggeser. Nilai offset ditampilkan di halaman saat Anda menggerakkan slider:
Seperti disebutkan di atas, outline-offsetmenerima nilai negatif, yang akan mengimbangi garis luar ke arah yang berlawanan (menuju pusat elemen), seperti yang ditunjukkan dalam demo interaktif berikutnya. Perhatikan garis besarnya dimulai pada -40px:
Jika Anda melihat demo di atas di Firefox, Anda akan melihat garis luar tampak benar pada awalnya, tetapi ketika penggeser disesuaikan, kerangka tidak ditampilkan dengan mulus dan berakhir di posisi yang salah. Menggulir elemen keluar dari tampilan, lalu kembali ke tampilan, memaksa browser untuk mengecat ulang garis luar di posisi yang benar. Tampaknya ini adalah bug khusus Firefox.
Bukan Bagian dari outlineSingkatan
Serupa dengan borderproperti, outlineproperti adalah singkatan yang mewakili tiga sifat: outline-color, outline-style, dan outline-width.
The outline-offsetproperti, oleh karena itu, tidak terwakili dalam ini atau properti singkat lainnya, sehingga perlu dinyatakan secara terpisah dari garis didefinisikan sendiri.
Terkait
- garis besar
- berbatasan
Informasi Lebih Lanjut
- outline-offset pada W3C
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Indikator "parsial" untuk IE berarti IE tidak mendukung outline-offset, tetapi mendukung outlinesingkatan dan tiga properti yang diwakilinya.
Selain bug yang disebutkan di atas di bagian "Positioning of the Outline", ada bug di Firefox di mana garis batas tidak digambar dengan benar jika elemen tersebut memiliki elemen turunan yang melebihi batas induk (misalnya menggunakan margin negatif atau pemosisian absolut) . Oleh karena itu, outline-offsetnilainya akan relatif terhadap batas diperpanjang yang dibuat oleh turunan yang meluap, bukan batas elemen induk asli. Untuk memahami ini lebih baik, lihat CodePen ini, utas Stack Overflow ini, dan laporan bug ini (kredit untuk pembaca Matt Vanes untuk mengirimkan bug ini).