outline-offsetOmaisuus CSS siirtymät määrätyssä ääriviivat elementistä rajan reunan tietyn summan. Rajasta poikkeava ääriviiva ei vie mitään tilaa sivulla (kuten absoluuttisesti sijoitettu elementti), joten ääriviivat voidaan siirtää milloin tahansa, eivätkä ne vaikuta ympäröivien elementtien sijaintiin tai asetteluun.
.example ( outline: solid 2px blue; outline-offset: 10px; )outlineOminaisuudella määriteltyjä ääriviivoja käytetään usein tarkennusrenkaina saavutettavuuden vuoksi. Siten outline-offsetominaisuuden avulla voit muuttaa tarkennusrenkaan sijaintia.
Arvot
outline-offset hyväksyy yhden tyyppisen arvon, pituuden, joka voi olla:
0(oletusarvo)- Mikä tahansa muu kelvollinen pituus tietyllä yksiköllä (negatiiviset arvot mukaan lukien)
Huomaa, että outline-offsetkuten outline-widthei, se ei hyväksy prosentuaalisia arvoja.
Ääriviivan sijainti
Oletusarvoisesti elementin ääriviivat piirretään välittömästi rajan ulkopuolelle (tai välittömästi sen alueen ulkopuolelle, jossa raja vedettäisiin, jos raja määritettäisiin). Siksi ääriviivat ja reunat on teknisesti mahdollista yhdistää kahden rajan vaikutukseksi:
Sieltä outline-offsetvoidaan muuttaa ääriviivan sijaintia reunan reunaan nähden. Kokeile alla olevaa esittelyä, jonka avulla voit muuttaa vuorovaikutteisesti ääriviivan siirtymäarvoa liukusäätimen avulla. Siirtymän arvo näkyy sivulla, kun liikutat liukusäädintä:
Kuten edellä mainittiin, outline-offsethyväksyy negatiiviset arvot, jotka siirtävät ääriviivat vastakkaiseen suuntaan (kohti elementin keskustaa), kuten seuraavassa interaktiivisessa esittelyssä on esitetty. Huomaa, että ääriviivat alkavat -40 kuvapistettä:
Jos tarkastelet yllä olevaa esittelyä Firefoxissa, huomaat, että ääriviivat ovat aluksi oikeat, mutta kun liukusäädintä säädetään, ääriviivat eivät näy sujuvasti ja päätyvät väärään asentoon. Elementin vierittäminen pois näkyvistä ja sitten takaisin näkymään pakottaa selaimen maalaamaan ääriviivat oikeaan asentoon. Tämä näyttää olevan vain Firefox-virhe.
Ei osa outlinelyhytkirjoitusta
Samanlainen borderomaisuutta, outlineomaisuus on lyhenne, joka edustaa kolme ominaisuutta: outline-color, outline-styleja outline-width.
Siksi outline-offsetomaisuutta ei ole edustettu tässä tai missään muussa lyhytaikaisessa ominaisuudessa, joten se on ilmoitettava erikseen määritellystä ääriviivasta.
Liittyvät
- ääriviivat
- rajalla
Lisää tietoa
- ääriviiva-offset W3C: ssä
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
IE: n "osittainen" indikaattori tarkoittaa, että IE ei tue outline-offset, mutta tukee outlinelyhentämistä ja kolmea sen edustamaa ominaisuutta.
Edellä olevan "Outline-paikannus" -osassa mainitun virheen lisäksi Firefoxissa on vika, jossa ääriviivat piirretään väärin, jos elementissä on alielementti, joka ylittää vanhemman rajan (esim. Käyttämällä negatiivisia marginaaleja tai absoluuttista paikannusta) . Siksi outline-offsetarvo on suhteessa ylivuotavan lapsen luomaan laajennettuun rajaan alkuperäisten vanhempien elementtien rajojen sijasta. Jos haluat ymmärtää tämän paremmin, katso tämä CodePen, tämä pinon ylivuotolanka ja tämä virheraportti (kiitos lukijalle Matt Vanesille tämän virheen lähettämisestä).