В outline-offsetимота в CSS компенсации на очертания от граничния ръб елемент, като определена сума. Контур, който се различава от контура, не заема никакво място на страницата (като абсолютно позициониран елемент), така че контурът може да бъде компенсиран в каквото и да е количество и това няма да повлияе на позицията или оформлението на околните елементи.
.example ( outline: solid 2px blue; outline-offset: 10px; )Контурите, дефинирани с помощта на outlineсвойството, често се използват като фокусни пръстени за достъпност. По този начин outline-offsetсвойството ви позволява да промените позицията на фокусния пръстен.
Стойности
outline-offset приема един вид стойност, дължина, която може да бъде:
0(по подразбиране)- Всяка друга валидна дължина с определена единица (включително отрицателни стойности)
Имайте предвид, че outline-offsetподобно на outline-widthтова не приема процентни стойности.
Позициониране на контура
По подразбиране контурът на даден елемент се изчертава непосредствено извън границата (или непосредствено извън мястото, където би се очертала границата, ако е дефинирана граница). Следователно е технически възможно да се комбинират контур и граница за двуграничен ефект:
Оттам outline-offsetможе да се използва за промяна на позицията на контура спрямо граничния ръб. Опитайте демонстрацията по-долу, която ви позволява да промените интерактивно стойността на изместване на контура с помощта на плъзгача. Стойността на отместването се показва на страницата при преместване на плъзгача:
Както бе споменато по-горе, outline-offsetприема отрицателни стойности, които ще компенсират контура в обратна посока (към центъра на елемента), както е показано в следващата интерактивна демонстрация. Забележете, че контурът започва от -40px:
Ако прегледате горната демонстрация във Firefox, ще забележите, че контурът изглежда правилен в началото, но когато плъзгачът се коригира, контурът не се показва гладко и се оказва в грешната позиция. Превъртането на елемента извън полезрението, след което отново в полезрението, принуждава браузъра да пребоядиса контура в правилната позиция. Това изглежда е грешка само за Firefox.
Не е част от outlineстенографията
Подобно на borderимуществото, outlineсобственост е краткият, който представлява три свойства: outline-color, outline-style, и outline-width.
Следователно outline-offsetимотът не е представен в това или друго стенографско свойство, така че трябва да бъде деклариран отделно от самия дефиниран контур.
Свързани
- контур
- граница
Повече информация
- контурно отместване на W3C
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 4 | 2 | 11. | 15 | 3.1 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Индикаторът „частичен“ за IE означава, че IE не поддържа outline-offset, но поддържа outlineстенография и трите свойства, които представлява.
В допълнение към грешката, спомената по-горе в раздела „Позициониране на контура“, в Firefox има грешка, при която контурът е изчертан неправилно, ако елементът има дъщерен елемент, който прелива родителската граница (например с използване на отрицателни полета или абсолютно позициониране) . Следователно outline-offsetстойността ще бъде по-скоро спрямо разширената граница, създадена от препълващото се дете, а не от границите на оригиналния родителски елемент. За да разберете това по-добре, вижте този CodePen, тази нишка за препълване на стека и този доклад за грешка (заслуга на читателя Matt Vanes за изпращането на тази грешка).