Anahat - CSS Hileleri | CSS Almanak 2024

CSS'deki outlineözellik, bir öğenin dışında bir çizgi çizer. Bunun dışında sınıra benzer:

Her zaman her tarafa gider, belirli tarafları belirtemezsiniz
Bu, kutu modelinin bir parçası değildir, bu nedenle öğenin veya bitişik öğelerin konumunu etkilemez (hata ayıklama için güzel!)

Diğer küçük gerçekler arasında sınır yarıçapına saygı göstermemesi (bir sınır olmadığı için mantıklı olduğunu düşünüyorum) ve her zaman dikdörtgen olmaması sayılabilir. Örneğin, anahat farklı yazı tipi boyutlarına sahip bir satır içi öğenin etrafında doluysa, Opera hepsinin etrafına kademeli bir kutu çizecektir.

Genellikle erişilebilirlik nedenleriyle, sekmeli olduğunda bir bağlantıyı konumlandırmayı etkilemeden ve fareyle üzerine gelmekten farklı bir şekilde vurgulamak için kullanılır.

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

Kısa gösterim

outline: ( || || ) | inherit

Kenarlıkla aynı özellikleri alır, ancak bunun yerine "anahat-" kullanılır.

Yukarıdaki kısaltma yazılabilirdi:

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

Notlar

Bir öğenin yalnızca bir (veya iki veya üç) tarafında bir anahat ayarlayamazsınız. Sadece tüm taraflar. Diye bir şey yoktur outline-top, outline-right, outline-bottom, veya outline-leftile var gibi border.
Konsolu herhangi bir web sitesinde açıp çalıştırmayı deneyin document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- sitelerin çoğunun bu şekilde yapısını göreceksiniz.
outline:focusvarsayılan olarak stiller için kullanılır . outlineStilleri kaldırırsanız , örneğin a:focus ( outline: 0; ), görsel olarak farklı bir stil kullanarak onları tekrar eklemeniz gerektiğini unutmayın.