Obrys - Triky CSS

Anonim

outlineNemovitost v CSS nakreslí čáru po obvodě prvku. Je to podobné jako s hranicí, kromě toho, že:

  1. Vždy jde kolem všech stran, nemůžete určit konkrétní strany
  2. Není to součást modelu pole, takže to neovlivní polohu prvku nebo sousedních prvků (pěkné pro ladění!)

Mezi další drobná fakta patří, že nerespektuje hraniční poloměr (dává smysl, předpokládám, že to není hranice) a že není vždy obdélníkový. Pokud například obrys obejde vložený prvek s různými velikostmi písma, Opera kolem toho všeho nakreslí rozložené pole.

Často se používá z důvodů přístupnosti, aby se zdůraznil odkaz, když je na kartě, aniž by to ovlivnilo umístění, a jiným způsobem než při najetí myší.

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

Těsnopis

outline: ( || || ) | inherit

Bere stejné vlastnosti jako ohraničení, ale místo toho s „outline-“.

Výše uvedená zkratka mohla být napsána:

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

Poznámky

  • Obrys nelze nastavit pouze na jednu (nebo dvě nebo tři) strany prvků. Pouze všechny strany. Není tam žádná taková věc jako outline-top, outline-right, outline-bottomnebo outline-leftjako by se s border.
  • Zkuste otevřít konzolu na libovolném webu a spustit document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- uvidíte mnoho struktur stránek tímto způsobem.
  • outlinese ve :focusvýchozím nastavení používá pro styly. Nezapomeňte, že pokud někdy odeberete outlinestyly, a:focus ( outline: 0; )musíte je přidat zpět pomocí nějakého jiného druhu vizuálně odlišného stylu.

Více informací

  • Dokumenty MDN

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný 1,2+ 1,5+ 7+ 8+ Žádný 3.1+