outline-offsetImovine u CSS-offseta definiranim crtama iz elementa graničnog ruba od strane određenog iznosa. Obris koji se razlikuje od obruba ne zauzima prostor na stranici (poput apsolutno pozicioniranog elementa), tako da se obris može nadoknaditi u bilo kojem iznosu i to neće utjecati na položaj ili raspored okolnih elemenata.
.example ( outline: solid 2px blue; outline-offset: 10px; )Obrisi definirani pomoću outlinesvojstva često se koriste kao prstenovi fokusa radi pristupačnosti. Dakle, outline-offsetsvojstvo vam omogućuje promjenu položaja prstena fokusa.
Vrijednosti
outline-offset prihvaća jednu vrstu vrijednosti, duljinu, koja može biti:
0(zadano)- Bilo koja druga valjana duljina s navedenom jedinicom (uključujući negativne vrijednosti)
Imajte na umu da outline-offset, poput outline-width, ne prihvaća postotne vrijednosti.
Pozicioniranje obrisa
Prema zadanim postavkama obris elementa crta se odmah izvan granice (ili odmah izvan mjesta gdje bi se granica povukla da je granica definirana). Stoga je tehnički moguće kombinirati obris i obrub za dvogranični učinak:
Odatle se outline-offsetmože koristiti za promjenu položaja obrisa u odnosu na rub ruba. Isprobajte demo u nastavku koji vam omogućuje interaktivnu promjenu vrijednosti pomaka obrisa pomoću klizača. Vrijednost pomaka prikazuje se na stranici dok pomičete klizač:
Kao što je gore spomenuto, outline-offsetprihvaća negativne vrijednosti, koje će pomaknuti obris u suprotnom smjeru (prema središtu elementa), kao što je prikazano u sljedećem interaktivnom demonstracijskom prikazu. Primijetite da obris počinje na -40 piksela:
Ako pogledate gornju demonstraciju u Firefoxu, primijetit ćete da se obris isprva čini ispravnim, ali kad se podesi klizač, obris se ne prikazuje glatko i završava u pogrešnom položaju. Pomicanjem elementa izvan vidljivog polja, a zatim vraćanjem u pregled, prisiljava preglednik da precrta obris u ispravni položaj. Čini se da je ovo bug samo za Firefox.
Nije dio outlinestenografije
Slično kao i borderimovine, outlinenekretnina je skraćenica koja predstavlja tri svojstva: outline-color, outline-stylei outline-width.
outline-offsetImovine, dakle, nije na ovaj ili bilo koji drugi Kratica svojstva, tako da treba biti proglašen odvojeno od definiranog same konture.
Povezano
- obris
- granica
Više informacija
- kontura-pomak na W3C
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Pokazatelj "djelomično" za IE znači da IE ne podržava outline-offset, ali podržava outlineskraćenicu i tri svojstva koja predstavlja.
Pored greške spomenute gore u odjeljku "Pozicioniranje obrisa", u Firefoxu postoji i pogreška u kojoj se obris pogrešno crta ako element ima podređeni element koji prelazi roditeljsku granicu (npr. Pomoću negativnih margina ili apsolutnog pozicioniranja) . Stoga će outline-offsetvrijednost biti relativna prema proširenoj granici koju je stvorilo preplavljeno dijete, a ne prema granicama izvornog nadređenog elementa. Da biste ovo bolje razumjeli, pogledajte ovaj CodePen, ovu nit preljeva steka i ovo izvješće o programskoj pogrešci (zasluga čitatelja Matta Vanesa što je poslao ovu grešku).