Ang mga balangkas ng CSS ay higit pa sa isang hangganan
Ang CSS outline property ay isang nakalilito na ari-arian. Kapag una mong natutunan ang tungkol dito, mahirap na maunawaan kung paano ito kahit na malayo naiiba mula sa ari-arian ng hangganan. Ipinapaliwanag ito ng W3C bilang pagkakaroon ng mga sumusunod na pagkakaiba:
- Ang mga balangkas ay hindi tumatagal ng espasyo.
- Ang mga balangkas ay maaaring hindi hugis-parihaba.
Ang mga balangkas ay hindi kukuha ng Space
Ang pahayag na ito, sa loob at ng sarili nito ay nakalilito. Paano hindi makakakuha ng espasyo sa pahina ng Web ang isang bagay sa iyong Web page? Ngunit kung sa tingin mo sa iyong Web page ay tulad ng isang sibuyas, ang bawat item sa pahina ay maaaring layered sa ibabaw ng isa pang item. Ang outline ng ari-arian ay hindi tumatagal ng espasyo dahil ito ay laging inilagay sa ibabaw ng kahon ng elemento.
Kapag ang isang balangkas ay inilalagay sa paligid ng isang elemento, wala itong epekto sa kung paano ang elementong iyon ay inilatag sa pahina. Hindi nito binabago ang laki o posisyon ng elemento. Kung inilagay mo ang isang balangkas sa isang elemento, aabutin ang parehong bilang ng puwang na kung wala kang balangkas ng sangkap na iyon. Ito ay hindi totoo sa isang hangganan. Ang hangganan sa isang elemento ay idinagdag sa lapad at taas ng elemento sa labas. Kaya kung mayroon kang isang imahe na 50 pixels ang lapad, na may isang 2-pixel na hangganan, kukuha ito ng 54 pixels (2 pixels para sa bawat panig na gilid). Ang parehong imahen na may 2-pixel na balangkas ay aabutin lamang ng 50 pixel width sa iyong pahina, ang outline ay ipapakita sa labas ng gilid ng imahe.
Ang mga balangkas ay maaaring maging Non-Parihabang
Bago mo simulan ang pag-iisip "cool, ngayon maaari kong gumuhit ng mga lupon!" Mag-isip muli. Ang pahayag na ito ay may iba't ibang kahulugan kaysa sa tingin mo. Kapag inilagay mo ang isang hangganan sa isang elemento, binibigyang-kahulugan ng browser ang elemento na parang isang higanteng hugis-parihaba na kahon. Kung ang kahon ay makakakuha ng split sa ilang mga linya, ang browser lamang ay umalis sa mga gilid bukas dahil ang kahon ay hindi nakasara. Ito ay tila nakikita ng browser ang hangganan na may isang malawak na malawak na screen - malawak na sapat para sa hanggahan na iyon ay isang tuloy-tuloy na rektanggulo.
Sa kaibahan, ang outline ng ari-arian ay tumatagal ng mga gilid sa pagsasaalang-alang. Kung ang isang nakabalangkas na sangkap ay sumasaklaw ng ilang linya, ang balangkas ay magsasara sa dulo ng linya at muling bubukas muli sa susunod na linya. Kung posible, ang balangkas ay mananatiling ganap na konektado pati na rin ang paglikha ng di-parihabang hugis.
Mga Paggamit ng Outline Property
Ang isa sa mga pinakamahusay na gamit ng outline property ay upang i-highlight ang mga termino para sa paghahanap. Maraming mga site ang gumawa nito sa isang kulay ng background, ngunit maaari mo ring gamitin ang outline ng ari-arian at huwag mag-alala tungkol sa pagdaragdag ng anumang karagdagang espasyo sa iyong mga pahina.
Tinatanggap ng outline-color property ang terminong "baligtarin" na ginagawang kulay ng balangkas ang kabaligtaran ng kasalukuyang background. Pinapayagan ka nito na i-highlight ang mga elemento sa mga dynamic na pahina ng Web nang hindi mo alam kung anong mga kulay ang ginagamit .
Maaari mo ring gamitin ang outline ng ari-arian upang alisin ang may tuldok na linya sa paligid ng mga aktibong link. Ang artikulong ito mula sa CSS-Trick ay nagpapakita kung paano tanggalin ang dotted outline.