Obrys - Triky CSS | Almanach CSS 2025

outlineNehnuteľnosť v CSS nakreslí čiaru po obvode prvku. Je to podobné ako s hranicami, až na to, že:

Vždy to ide okolo všetkých strán, nemôžete určiť konkrétne strany
Nie je súčasťou modelu škatule, takže nebude mať vplyv na polohu prvku alebo susedných prvkov (vhodné na ladenie!)

Medzi ďalšie drobné fakty patrí, že nerešpektuje polomer hranice (má zmysel, myslím, že to nie je hranica) a že nie je vždy obdĺžnikový. Ak napríklad obrys obieha vložený prvok s rôznymi veľkosťami písma, Opera okolo toho všetkého nakreslí rozložené políčko.

Často sa používa z dôvodov prístupnosti na zdôraznenie odkazu, keď je na ňom záložka, bez toho, aby to malo vplyv na umiestnenie, a iným spôsobom, ako keď kurzor myši umiestnite.

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

Skratka

outline: ( || || ) | inherit

Má rovnaké vlastnosti ako orámovanie, ale namiesto toho má výraz „outline-“.

Vyššie uvedená skratka mohla byť napísaná:

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

Poznámky

Obrys nemôžete nastaviť iba na jednu (alebo dve alebo tri) strany prvkov. Iba všetky strany. Nie je tam žiadna taká vec ako outline-top, outline-right, outline-bottomalebo outline-leftako by sa s border.
Skúste otvoriť konzolu na ľubovoľnom webe a spustiť ho document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- uvidíte tak veľa štruktúr webov.
outlinesa :focusv predvolenom nastavení používa pre štýly. Pamätajte, že ak niekedy odstránite outlineštýly, napríklad a:focus ( outline: 0; ), musíte ich znova pridať pomocou iného vizuálne odlišného štýlu.