The outline-offsetharta di CSS ofset garis yang ditetapkan dari tepi sempadan elemen ini dengan jumlah yang dinyatakan. Garis besar, yang berbeza dengan sempadan, tidak mengambil ruang di halaman (seperti elemen yang benar-benar diposisikan) sehingga garis besar dapat diimbangi dalam jumlah apa pun dan tidak akan mempengaruhi kedudukan atau susun atur elemen di sekitarnya.
.example ( outline: solid 2px blue; outline-offset: 10px; )Garis besar yang ditentukan menggunakan outlineharta tanah sering digunakan sebagai cincin fokus, untuk aksesibilitas. Oleh itu, outline-offsetharta tanah membolehkan anda menukar kedudukan gelang fokus.
Nilai
outline-offset menerima satu jenis nilai, panjang, yang boleh:
0(lalai)- Panjang sah yang lain dengan unit yang ditentukan (termasuk nilai negatif)
Perhatikan bahawa outline-offset, seperti outline-width, tidak menerima nilai peratusan.
Kedudukan Garis Besar
Secara lalai garis besar elemen dilukis tepat di luar sempadan (atau tepat di luar tempat perbatasan akan dilukis jika sempadan ditentukan). Oleh itu, secara teknikal mungkin untuk menggabungkan garis besar dan sempadan untuk kesan dua sempadan:
Dari sana, outline-offsetdapat digunakan untuk mengubah posisi garis besar relatif ke tepi sempadan. Cubalah demo di bawah yang membolehkan anda mengubah nilai ofset garis besar secara interaktif menggunakan slaid. Nilai ofset dipaparkan di halaman semasa anda menggerakkan slaid:
Seperti yang disebutkan di atas, outline-offsetmenerima nilai negatif, yang akan mengimbangi garis besar ke arah yang bertentangan (menuju pusat elemen), seperti yang ditunjukkan dalam demo interaktif berikutnya. Perhatikan garis besar bermula pada -40px:
Sekiranya anda melihat demo di atas di Firefox, anda akan melihat garis besarnya kelihatan betul pada mulanya tetapi apabila slaid diselaraskan garis besar tidak akan lancar dan berakhir pada kedudukan yang salah. Menggulir elemen dari pandangan, kemudian kembali ke pandangan, memaksa penyemak imbas untuk mengecat semula garis besar pada kedudukan yang betul. Nampaknya ini adalah bug Firefox sahaja.
Bukan Bahagian outlineShorthand
Sama dengan borderharta, outlineharta adalah singkatan yang mewakili tiga sifat: outline-color, outline-style, dan outline-width.
The outline-offsetharta, oleh itu, tidak diwakili dalam ini atau apa-apa harta trengkas lain, jadi ia perlu diisytiharkan secara berasingan daripada garis yang ditentukan sendiri.
Berkaitan
- garis besar
- sempadan
Maklumat lanjut
- garis besar-ofset pada W3C
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Indikator "separa" untuk IE bermaksud IE tidak menyokong outline-offset, tetapi menyokong outlinesingkatan dan tiga sifat yang diwakilinya.
Selain bug yang disebutkan di atas di bahagian "Positioning of the Outline", ada bug di Firefox di mana garis besar dilukis dengan tidak betul jika elemen tersebut memiliki elemen anak yang melampaui batas induk (misalnya menggunakan margin negatif atau kedudukan mutlak) . Oleh itu, outline-offsetnilainya akan relatif dengan batas lanjutan yang dibuat oleh anak yang meluap, dan bukannya batas elemen induk yang asal. Untuk memahami perkara ini dengan lebih baik, lihat CodePen ini, utas Stack Overflow ini, dan laporan pepijat ini (kredit kepada pembaca Matt Vanes kerana menghantar bug ini).