outline-offsetCSS-is olev omadus kompenseerib määratletud piirjooni elemendi piiriservast määratud summa võrra. Äärisest erinev kontuur ei võta lehel ruumi (nagu absoluutselt paigutatud element), nii et kontuuri saab nihutada mis tahes ulatuses ja see ei mõjuta ümbritsevate elementide asukohta ega paigutust.
.example ( outline: solid 2px blue; outline-offset: 10px; )Atribuudi abil määratletud kontuure outlinekasutatakse juurdepääsetavuse huvides sageli fookusrõngastena . Seega outline-offsetvõimaldab omadus muuta fookusrõnga asukohta.
Väärtused
outline-offset aktsepteerib ühte liiki väärtust, pikkust, mis võib olla:
0(vaikimisi)- Mis tahes muu kehtiv pikkus koos määratud ühikuga (sealhulgas negatiivsed väärtused)
Pange tähele, et outline-offsetsarnaselt outline-widthei aktsepteerita protsendiväärtusi.
Kontuuri paigutus
Vaikimisi joonistatakse elemendi kontuur vahetult väljaspool piiri (või vahetult väljaspool seda, kus piir oleks määratud, kui piir oleks määratletud). Seetõttu on tehniliselt võimalik ühendada piirjoon ja piir kahepiiriliseks efektiks:
Sealt outline-offsetsaab seda kasutada piirjoonte positsiooni muutmiseks piiri serva suhtes. Proovige allpool olevat demot, mis võimaldab teil liuguri abil interaktiivselt muuta kontuuri nihke väärtust. Liuguri liigutamisel kuvatakse lehel nihke väärtus:
Nagu eespool mainitud, outline-offsetaktsepteerib negatiivseid väärtusi, mis kompenseerivad kontuuri vastupidises suunas (elemendi keskosa suunas), nagu on näidatud järgmises interaktiivses demos. Pange tähele, et kontuuri algus on -40 pikslit:
Kui vaatate ülaltoodud demot Firefoxis, märkate, et kontuur näib esialgu õige, kuid kui liugurit reguleeritakse, ei rendreerita kontuuri sujuvalt ja lõpuks vales asendis. Elemendi vaateväljalt kerimine ja seejärel tagasi vaade sunnib brauserit kontuur õiges asendis üle värvima. Tundub, et see on ainult Firefoxi viga.
Pole osa outlinelühikirjandusest
Sarnaselt bordervara, outlinevara on lühem, mis esindab kolm omadust: outline-color, outline-styleja outline-width.
outline-offsetVara, seega ei ole esindatud käesoleva või muu stenografist vara, nii et see tuleb deklareerida eraldi piirjoontega ise.
Seotud
- kontuur
- piir
Rohkem informatsiooni
- kontuur-nihe W3C-l
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
IE “osaline” indikaator tähendab, et IE ei toeta outline-offset, kuid toetab outlinelühi- ja kolme omadust, mida see esindab.
Lisaks ülalnimetatud veale jaotises „Kontuuri paigutamine” on Firefoxis viga, kus kontuur on valesti joonistatud, kui elemendil on alamelement, mis ületab vanema piiri (nt negatiivsete veeriste või absoluutse positsioneerimise kasutamine) . Seetõttu on outline-offsetväärtus suhteline ülevoolava lapse loodud laiendatud piiriga, mitte algsete vanemelemendi piiridega. Selle paremaks mõistmiseks vaadake seda CodePenit, seda Stack Overflow lõime ja seda veaaruannet (krediit lugeja Matt Vanesile selle vea saatmise eest).