CSS shēmas ir vairāk nekā tikai robeža
CSS kontūras īpašums ir mulsinošs īpašums. Kad jūs vispirms uzzināsit par to, ir grūti saprast, kā tas pat attālināti atšķiras no robežas īpašuma. W3C skaidro, ka tam ir šādas atšķirības:
- Apraksti neaizņem vietas.
- Kontūras var nebūt taisnstūrveida.
Konstrukcijas neuzņem vietu
Šis paziņojums pats par sevi ir neskaidrs. Kā tīmekļa vietnes objekts tīmekļa vietnes vietā neaizņem vietu? Bet, ja jūs domājat, ka jūsu tīmekļa lapa ir kā sīpols, katrs lapas elements var tikt novietots virs citas vienības. Konstrukcijas īpašums neaizņem vietu, jo tas vienmēr tiek novietots elementa kārbas augšpusē.
Ja elementam ir novietots kontūrs, tam nav ietekmes uz to, kā šis elements ir izvietots lapā. Tas nemaina elementa izmēru vai pozīciju. Ja elementam ir uzlikts plāns, tas aizņem tikpat daudz vietas, kā jums nebūtu šī elementa kontūras. Tas neattiecas uz robežu. Elementa robeža tiek pievienota elementa ārējam platumam un augstumam. Tātad, ja jums būtu attēls, kas bija 50 pikseļu platums, ar 2 pikseļu malu, tas aizņemtu 54 pikseļus (2 pikseļi katrai sānu malai). Tas pats attēls ar 2 pikseļu kontūru jūsu lappusē aizņems tikai 50 pikseļu platumu, kontūra parādīsies virs attēla ārējās malas.
Raksturojumi var nebūt taisnstūrveida
Pirms sākat domāt, "atdzesē, tagad es varu izdarīt apļus!" Padomā vēlreiz. Šim apgalvojumam ir atšķirīga nozīme nekā jūs domājat. Kad elementam tiek pievienota robeža, pārlūks interpretē elementu tā, it kā tas būtu viens milzu taisnstūra lodziņš. Ja kastīte tiek sadalīta vairākās rindās, pārlūks vienkārši atstāj malas, jo lodziņš nav aizvērts. Tas ir tā, it kā pārlūkprogramma redzētu robežu ar bezgalīgi platā ekrāna - pietiekami plaša, lai šī robeža būtu viens nepārtraukts taisnstūris.
Savukārt kontūras īpašums ņem vērā malas. Ja aprakstītais elements aptver vairākas līnijas, kontūra aizveras līnijas beigās un atkal atveras nākamajā rindā. Ja iespējams, kontūrs paliks pilnībā pieslēgts, izveidojot ne-taisnstūrveida formu.
Vispārējā īpašuma izmantošana
Viens no vislabāk izmantotajiem kontūras īpašumiem ir izcelties meklēšanas vienumi. Daudzas vietnes to dara ar fona krāsu, bet jūs varat arī izmantot kontūru īpašumu, un neuztraucieties par papildu atstarpēm jūsu lapās.
Kontūrkrāsas īpašums pieņem terminu "invertcels", kas kontūru krāso, ņemot vērā pašreizējo fonu. Tas ļauj izcelt elementus dinamiskās Web lapās, nezinot, kādas krāsas tiek izmantotas .
Jūs varat arī izmantot kontūras īpašību, lai noņemtu punktētu līniju ap aktīvām saitēm. Šis CSS-triku raksts parāda, kā noņemt punktētu kontūru.