outline-offsetĪpašums CSS kompensē noteiktā kontūru no elementa robežas malu ar norādīto summu. Kontūra, kas atšķiras no apmales, lapā neaizņem vietu (piemēram, absolūti novietots elements), tāpēc kontūru var kompensēt jebkurā apjomā, un tas neietekmēs apkārtējo elementu pozīciju vai izkārtojumu.
.example ( outline: solid 2px blue; outline-offset: 10px; )Kontūras, kas noteiktas, izmantojot outlineīpašumu, pieejamības labad bieži tiek izmantotas kā fokusa gredzeni. Tādējādi outline-offsetīpašums ļauj mainīt fokusa gredzena pozīciju.
Vērtības
outline-offset pieņem viena veida vērtību, garumu, kas var būt:
0(noklusējums)- Jebkurš cits derīgs garums ar noteiktu vienību (ieskaitot negatīvās vērtības)
Ņemiet vērā, ka outline-offsettāpat kā outline-widthnepieņem procentuālās vērtības.
Kontūras pozicionēšana
Pēc noklusējuma elementa kontūra tiek uzzīmēta tieši ārpus robežas (vai tieši ārpus tās, kur robeža tiktu uzzīmēta, ja būtu noteikta robeža). Tāpēc ir tehniski iespējams apvienot kontūru un robežu, lai iegūtu divu robežu efektu:
Turpmāk to outline-offsetvar izmantot, lai mainītu kontūras stāvokli attiecībā pret robežas malu. Izmēģiniet zemāk esošo demonstrāciju, kas ļauj interaktīvi mainīt kontūras nobīdes vērtību, izmantojot slīdni. Pārvietojuma vērtība tiek parādīta lapā, pārvietojot slīdni:
Kā minēts iepriekš, outline-offsetpieņem negatīvas vērtības, kas izlīdzinās kontūru pretējā virzienā (virzienā uz elementa centru), kā parādīts nākamajā interaktīvajā demonstrācijā. Ievērojiet, ka kontūras sākums ir -40 pikseļi:
Ja pārlūkprogrammā Firefox apskatāt iepriekš minēto demonstrāciju, pamanīsit, ka kontūra sākumā šķiet pareiza, bet, kad slīdnis ir pielāgots, kontūra netiek vienmērīgi parādīta un nonāk nepareizā pozīcijā. Ritinot elementu ārpus skata, pēc tam atkal skatā, pārlūks liek pārkrāsot kontūru pareizajā pozīcijā. Šķiet, ka tā ir tikai Firefox kļūda.
Nav daļa no outlinestenogrāfijas
Līdzīgi borderīpašumu, outlineīpašums ir saīsinājums, kas apzīmē trīs īpašības: outline-color, outline-style, un outline-width.
Tāpēc outline-offsetīpašums nav attēlots šajā vai kādā citā stenogrāfijas īpašumā, tāpēc tas jādeklarē atsevišķi no pašas definētās kontūras.
Saistīts
- izklāsts
- robežas
Vairāk informācijas
- W3C kontūras nobīde
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
IE “daļējais” indikators nozīmē, ka IE neatbalsta outline-offset, bet atbalsta outlinestenogrāfiju un trīs tā pārstāvētās īpašības.
Papildus iepriekšminētajai kļūdai sadaļā “Kontūras pozicionēšana” Firefox ir kļūda, kurā kontūra tiek uzzīmēta nepareizi, ja elementam ir pakārtots elements, kas pārspēj vecāku robežu (piemēram, izmantojot negatīvās piemales vai absolūto pozicionēšanu) . Tāpēc outline-offsetvērtība būs salīdzināma ar paplašināto robežu, ko radījis pārpildītais bērns, nevis sākotnējās vecāku elementa robežas. Lai to labāk saprastu, skatiet šo CodePen, šo kaudzes pārpildes pavedienu un šo kļūdu pārskatu (nopelns lasītājam Matt Vanes par šīs kļūdas nosūtīšanu).