CSS kraštinės ir kontūrai yra vertingi įrankiai žiniatinklio dizaineriams, norintiems suteikti svetainei nuotaiką. Jais lengva naudotis, kai žinote, kaip jie veikia, ir yra pakankamai universalūs, kad atitiktų įvairius poreikius. Pažvelkime į CSS sienas, kad pamatytumėte, nuo ko turėtumėte pradėti.
Kuo skiriasi kraštinė ir kontūras CSS?
CSS kontūrai ir kraštinės sudaro du išorinius sluoksnius CSS dėžutės modelis, sėdi tarp sienų ir paraščių. Nors šios savybės yra panašios, jų vertė ir paskirtis skiriasi.
Pirma, CSS kontūrai yra už sienų. Tai reiškia, kad jie gali persidengti su turiniu, esančiu už elemento, kuriam juos taikote, ribų. Be to, CSS kraštinės keičia elemento matmenis, bet kontūrai ne.
Jei jums sunku vizualizuoti kraštinių ir kontūrų stilius, galite naudoti savo naršyklės kūrimo įrankiai, skirti derinti juos.
CSS kraštinės ir bendros nuosavybės vertės
Nepaisant skirtumų, CSS kraštinės ir kontūrai turi tam tikrų vertybių. Kiekvienam vartojamas trumpinys taip pat labai panašus.
CSS Border & Outline Shorthand
Kaip ir kitose sudėtingose CSS ypatybėse, tiek kraštinėse, tiek kontūruose yra stenografijos. Abi šios savybės turi tą patį stenografinių parinkčių formatą ir atrodo taip.
siena: plotisstiliusspalva;
kontūras: plotisstiliusspalva;Taip sukuriamos taisyklės, kurios atrodo taip, kai jos veikia. Žinoma, šis trumpinys neapima visų galimų šių savybių verčių.
kraštinė: 10 pikselių vientisa mėlyna;
kontūras: 20 pikselių vientisas raudonas;Šios sutrumpintos CSS kraštinės ir kontūro taisyklės sukuria ploną mėlyną kraštinę su storu raudonu kontūru.
Kaip ir kitos sutrumpintos CSS savybės, taip pat galite naudoti atskiras ypatybes, kad pasiektumėte tuos pačius rezultatus.
CSS kraštinės plotis ir kontūro plotis
Kraštinių ir kontūrų plotiai yra pasirenkamos CSS ypatybių reikšmės, kurios nustato naudojamų kraštinių ir kontūrų storį. Šių savybių formatas yra tas pats.
kontūro plotis: 20 pikselių;
kraštinės plotis: 10 pikselių;Kraštinės leidžia nustatyti individualų kiekvienos elemento pusės plotį, tačiau kontūrai to nedaro. Daugiau apie tai galite perskaityti kituose skyriuose.
CSS kraštinės ir kontūro stiliaus
CSS kraštinės ir kontūrai būna įvairių stilių. Vientisos kraštinės yra labiausiai paplitusios, tačiau galite kūrybiškai naudoti kraštines ir kontūrus.
apvado stilius: tvirtas;
kontūro stilius: taškuotas;Visą įvairių CSS kraštinių ir kontūrų stilių sąrašą rasite šio straipsnio pabaigoje.
CSS kraštinės spalva ir kontūro spalva
Kaip ir kitose spalvomis pagrįstose CSS ypatybėse, kraštinės ir kontūrai priima visas teisines CSS spalvas. Tai apima šešioliktainius kodus, RGB kodus, trumpąsias spalvas ir kt.
kraštinės spalva: mėlyna;
kontūro spalva: #ff0000;Taip pat galite naudoti spalvų gradientus dirbdami su CSS kraštinėmis ir kontūrais.
CSS sienų ypatybių vertės
Be bendrų nuosavybės vertybių, sienos ir kontūrai taip pat turi unikalių vertybių, kurias reikia ištirti. CSS kraštinės turi dvi unikalias savybes, kurias verta išmokti.
CSS kraštinės spindulys
Pridėjus spindulį prie elemento kraštinės, galite daug valdyti jo formą. Kiekvienas elemento kampas gali turėti skirtingą spindulį ir šią savybę galima nustatyti net tada, kai kraštinės stilius nustatytas į None.
kraštinės spindulys: 20 pikselių;Galite nustatyti vieną reikšmę, kad pakeistumėte visų kampų spindulį.
Taip pat galite padalinti kampus į grupes: viršuje kairėje / apačioje dešinėje ir viršuje dešinėje / apačioje kairėje.
kraštinės spindulys: 10 piks. 20 piks.;Tai leidžia lengvai kurti įdomias formas naudojant HTML elementus.
Galiausiai galite nustatyti, kad kiekvienas kampas turėtų savo spindulį.
kraštinės spindulys: 10 piks. 20 piks. 30 piks. 40 piks.;Šios vertės taikomos pagal laikrodžio rodyklę, pradedant nuo viršutinio kairiojo kampo.
CSS kraštinės ypatybės
Skirtingai nuo kontūrų, galite nustatyti, kad kiekviena kraštinės pusė turėtų unikalią daugelio jos savybių vertę. Tai leidžia kiekvienai elemento pusei suteikti skirtingą plotį.
kraštinė-kairė-plotis: 10px;
kraštinė-dešinė-plotis: 20px;
kraštinės viršaus plotis: 30 pikselių;
kraštinės-apačios-plotis: 40px;Taip pat galite nustatyti nepriklausomus CSS kraštinių stilius kiekvienai elemento pusei.
kraštinė-kairė-stilius: vientisas;
kraštinės dešinės stilius: taškuotas;
kraštinės-top-stilius: brūkšninis;
border-bottom-style: dvigubai;Ir jei norite, galite pakeisti kiekvienos pusės spalvą.
kraštinės kairysis stilius: mėlyna;
border-right-style: #ff0000;
border-top-style: #00ff00;
kraštinės-apačios stilius: rgb (0, 0, 255);CSS kraštinės pusės veikia su įprastu trumpiniu, kad būtų galima derinti taip.
kraštinė kairėje: 10 pikselių vientisa mėlyna;
siena-dešinė: 20px taškuotas #00ff00;
kraštinė viršuje: 30px brūkšniu #ff0000;
apačia: 40px dvigubairgb(0, 0, 255);CSS Outline Property Values
Kaip ir CSS kraštinės, kontūrai turi unikalią savybę; kontūro poslinkis.
CSS kontūro poslinkis
Pridėjus poslinkį į kontūrą sukuriama erdvė tarp jo ir pagrindinio elemento. Šis poslinkis turi būti vienodas kiekvienoje kontūro pusėje, o nuosavybė priima tik vieną vertę.
kontūro poslinkis: 10 pikselių;Tai gali būti puikus būdas panaudoti trečią elementų kraštinę, atitinkančią fono spalvą.
CSS kraštinių ir kontūrų stiliai
Ir kraštinėms, ir kontūrams reikia stiliaus. Galima rinktis iš dešimties stilių, įskaitant kraštines, kurios visai nerodomos.
apvado stilius: tvirtas;
kraštinės stilius: taškuotas;
kraštinės stilius: brūkšninis;
kraštinės stilius: griovelis;
krašto stilius: kraigas;
kraštinės stilius: dvigubai;
kraštinės stilius: įdėta;
border-style: pradžia;
kraštinės stilius: paslėptas;
kraštinės stilius: nėra;Kraštinės turi tą patį stilių su kontūrais, tik su kontūro stiliumi nustatyta kaip nuosavybe.
Kaip naudoti CSS sienas ir kontūrus
Kontūrai ir kraštinės yra puikus dizaino įrankis svetainių kūrėjams. Naudodami šias CSS ypatybes galite apibrėžti savo svetainės išvaizdą ir pojūtį, tačiau turėsite būti kūrybingi.