The CSS kontūras īpašums ir mulsinošs īpašums. Pirmo reizi uzzinot par to, ir grūti saprast, kā tas pat attālināti atšķiras no pierobežas īpašuma. W3C to skaidro ar šādām atšķirībām:
- Kontūras neaizņem vietu.
- Kontūras var nebūt taisnstūrveida.
Kontūras neaizņem vietu
Šis apgalvojums pats par sevi ir mulsinošs. Kā objekts jūsu Web lapā nevar aizņemt vietu Web lapā? Bet, ja jūs domājat, ka jūsu tīmekļa lapa ir kā sīpols, katrs lapas vienums var būt slāņots virs cita priekšmeta. Kontūras rekvizīts neaizņem vietu, jo tas vienmēr tiek novietots virs elementa lodziņa.
Ja kontūra tiek novietota ap elementu, tas neietekmē to, kā šis elements ir izkārtots lapā. Tas nemaina elementa lielumu vai pozīciju. Ja elementam ievietojat kontūru, tas aizņem tikpat daudz vietas, it kā jums nebūtu šī elementa kontūras. Tas neattiecas uz a robežas. Elementa malai un platumam pievieno elementa ārējo platumu un augstumu. Tātad, ja jums būtu attēls tas bija 50 pikseļu plats, ar 2 pikseļu apmali, tas aizņems 54 pikseļus (2 pikseļi katrai sānu malai). Tas pats attēls ar 2 pikseļu kontūru aizņems tikai 50 pikseļu platumu jūsu lapā, kontūra parādīsies virs attēla ārējās malas.
Kontūras var nebūt taisnstūrveida
Pirms sākat domāt "forši, tagad es varu uzzīmēt apļus", padomājiet vēlreiz. Šim apgalvojumam ir cita nozīme, nekā jūs domājat. Ievietojot elementam apmali, pārlūks interpretē elementu tā, it kā tas būtu viens milzīgs taisnstūra lodziņš. Ja lodziņš tiek sadalīts vairākās rindās, pārlūks vienkārši atstāj malas atvērtas, jo lodziņš nav aizvērts. Tas ir tā, it kā pārlūks redzētu robežu ar bezgalīgi platekrānu - pietiekami plašu, lai šī robeža būtu viens nepārtraukts taisnstūris.
Turpretī kontūras īpašība ņem vērā malas. Ja iezīmētais elements aptver vairākas līnijas, kontūra tiek aizvērta rindas beigās un atkal tiek atvērta nākamajā rindā. Ja iespējams, arī kontūra paliks pilnībā savienota, izveidojot formu, kas nav taisnstūra forma.
Īpašuma Kontūra izmantošana
Viens no rekvizīta labākajiem izmantošanas veidiem ir meklēšanas vienumu izcelšana. Daudzas vietnes to dara ar fona krāsu, taču jūs varat arī izmantot rekvizītu un neuztraucieties par papildu atstarpju pievienošanu savās lapās.
Īpašumā kontūras krāsa pieņem terminu "apgriezt", kas kontūras krāsu padara par pašreizējā fona apgriezto vērtību. Tas ļauj izcelt elementus dinamiskās Web lapās, nezinot, kas krāsas tiek izmantotas.
Varat arī izmantot rekvizītu, lai noņemtu punktētu līniju ap aktīvajām saitēm. Šis raksts no CSS-triki parāda, kā noņemiet punktētu kontūru.