outline-offsetИмовина у ЦСС компензација дефинисаном нацрту од граничног ивице неког елемента од одређеног износа. Обрис који се разликује од обруба не заузима простор на страници (попут апсолутно позиционираног елемента), тако да се обрис може надокнадити у било којој количини и неће утицати на положај или распоред околних елемената.
.example ( outline: solid 2px blue; outline-offset: 10px; )Обриси дефинисани помоћу outlineсвојства често се користе као прстенови фокуса ради приступачности. Дакле, outline-offsetсвојство вам омогућава да промените положај прстена фокуса.
Вредности
outline-offset прихвата једну врсту вредности, дужину, која може бити:
0(подразумевано)- Било која друга важећа дужина са назначеном јединицом (укључујући негативне вредности)
Имајте на уму да outline-offset, као outline-width, не прихвата процентуалне вредности.
Позиционирање обриса
Стандардно се контура елемента црта одмах изван границе (или одмах изван места где би се црта повукла да је граница дефинисана). Стога је технички могуће комбиновати контуру и обруб за двогранични ефекат:
Одатле outline-offsetсе може користити за промену положаја обриса у односу на ивицу границе. Испробајте демонстрацију испод која вам омогућава да интерактивно промените вредност померања обриса помоћу клизача. Вредност офсета приказује се на страници док померате клизач:
Као што је горе поменуто, outline-offsetприхвата негативне вредности, које ће померати обрис у супротном смеру (према центру елемента), као што је приказано у следећем интерактивном демонстрацијском приказу. Приметите да контура почиње на -40пк:
Ако погледате горњу демонстрацију у Фирефок-у, приметићете да се обрис испрва чини тачним, али када се подеси клизач, обрис се не приказује глатко и завршава у погрешном положају. Помицање елемента из видокруга, а затим повратак у вид, присиљава прегледач да префарба обрис у прави положај. Чини се да је ово грешка само за Фирефок.
Није део outlineстенографије
Слично као и borderимовину, outlineимовина је скраћеница која представља три особине: outline-color, outline-style, и outline-width.
outline-offsetИмовине, дакле, није заступљен у овом или неком другом скраћеним имовине, тако да мора да буде проглашен одвојено од дефинисаног саме контуре.
Повезан
- обрис
- граница
Више информација
- контура-помак на В3Ц
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
„Делимични“ индикатор за ИЕ значи да ИЕ не подржава outline-offset, али подржава outlineскраћеницу и три својства која представља.
Поред грешке поменуте горе у одељку „Позиционирање обриса“, у Фирефок-у постоји и грешка где се обрис црта нетачно ако елемент има подређени елемент који прелази родитељску границу (нпр. Коришћење негативних маргина или апсолутно позиционирање) . Према томе, outline-offsetвредност ће бити релативна према проширеној граници коју је креирало преплављено дете, уместо према границама оригиналног надређеног елемента. Да бисте ово боље разумели, погледајте овај ЦодеПен, ову нит преливања стека и овај извештај о грешци (заслуга читаоца Матта Ванеса због слања ове грешке).