The CSS kontuurvara on segane omadus. Kui te esimest korda selle kohta teada saate, on raske mõista, kuidas see erineb piiriäärsest varast isegi kaugelt. W3C selgitab, et sellel on järgmised erinevused:
- Piirjooned ei võta ruumi.
- Kontuur võib olla mitte ristkülikukujuline.
Ülevaated ei võta ruumi
See väide on iseenesest segane. Kuidas ei saa teie veebisaidil olev objekt veebilehel ruumi võtta? Kuid kui arvate, et teie veebileht on nagu sibul, võib iga üksus sellel lehel olla teise üksuse peal. Atribuut kontuur ei võta ruumi, sest see asetatakse alati elemendi kasti peale.
Kui kontuur paigutatakse elemendi ümber, ei mõjuta see seda, kuidas see element lehele paigutatakse. See ei muuda elemendi suurust ega asukohta. Kui panete elemendile kontuuri, võtab see sama palju ruumi, nagu poleks teil selle elemendi kontuuri. See ei kehti a piir. Elemendi välimisele laiusele ja kõrgusele lisatakse elemendi piir. Nii et kui teil oleks pilt see oli 50 pikslit lai ja 2-pikslise äärega kuluks 54 pikslit (2 pikslit iga küljepiiri jaoks). See sama 2-pikslise kontuuriga pilt võtab teie lehel ainult 50 pikslit laiust, kontuur kuvatakse pildi välisserva kohal.
Piirjooned võivad olla mitte ristkülikukujulised
Enne kui hakkate mõtlema "lahe, nüüd saan joonistada ringe", mõelge uuesti. Sellel avaldusel on teistsugune tähendus, kui võite arvata. Kui panete elemendile piiri, tõlgendab brauser elementi nii, nagu oleks see üks hiiglaslik ristkülikukujuline kast. Kui kast jaotatakse mitmele reale, jätab brauser servad lihtsalt lahti, kuna kast pole suletud. Tundub, nagu näeks brauser piiri ääretult laiekraaniga - piisavalt lai, et see piir oleks üks pidev ristkülik.
Seevastu kontuuri omadus võtab arvesse servi. Kui kontuuriga element hõlmab mitut rida, sulgub kontuur joone lõpus ja avaneb uuesti järgmisel real. Võimalusel püsib ka kontuur täielikult ühendatud, luues mitte ristkülikukujulise kuju.
Atribuudi Outline kasutus
Atribuudi kontuur üks parimaid kasutusviise on otsinguterminite esiletõstmine. Paljud saidid teevad seda taustavärviga, kuid võite kasutada ka atribuudi kontuur ja ärge muretsege oma lehtedele täiendavate tühikute lisamise pärast.
Atribuudil kontuurvärv aktsepteeritakse terminit "invert", mis muudab kontuurvärvi praeguse tausta pöördvõrdeliseks. See võimaldab teil dünaamilistel veebilehtedel elemente esile tõsta, ilma et peaksite midagi teadma kasutatakse värve.
Atribuudi kontuur abil saate punktiirjoone eemaldada aktiivsete linkide ümber. See artikkel pärineb CSS-trikid näitab, kuidas eemaldage punktiirjoon.