Обрис - ЦСС-трикови

Anonim

outlineИмовина у ЦСС извлачи линију око спољне стране једног елемента. Слично је граници, осим што:

  1. Увек иде око свих страна, не можете одредити одређене стране
  2. Није део модела кутије, па неће утицати на положај елемента или суседних елемената (лепо за отклањање грешака!)

Друге мање чињенице укључују да он не поштује радијус границе (претпостављам да има смисла јер није граница) и да није увек правоугаони. На пример, ако се обрис обилази унутар уметнутог елемента различите величине фонта, Опера ће око свега нацртати постепени оквир.

Често се користи из разлога приступачности да би се нагласила веза када се табулира, без утицаја на позиционирање и на другачији начин од лебдења.

a:focus ( outline: 1px dashed red; )

Стенографија

outline: ( || || ) | inherit

Потребна су иста својства као и обруб, али уместо тога са „контура-“.

Горњи стенограф је могао бити написан:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Напомене

  • Не можете поставити обрис на само једној (или две, или три) стране елемента. Само са свих страна. Не постоји таква ствар као што је outline-top, outline-right, outline-bottom, или outline-leftкао да је са border.
  • Покушајте да отворите конзолу на било којој веб локацији и покренете document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- видећете пуно структура на тај начин.
  • outlineподразумевано се користи за :focusстилове. Имајте на уму да ако икада уклоните outlineстилове, на пример a:focus ( outline: 0; ), треба да их додате у неку другу врсту визуелно различитог стила.

Више информација

  • МДН Документи

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који 1.2+ 1.5+ 7+ 8+ Било који 3.1+