CSS-i äärised ja piirjooned on väärtuslikud tööriistad veebidisaineritele, kes soovivad saidile elegantsi lisada. Neid on lihtne kasutada, kui teate, kuidas need töötavad, ja need on piisavalt mitmekülgsed, et vastata paljudele vajadustele. Vaatame CSS-i piire, et näha, kust peaksite alustama.

Mis vahe on CSS-i piiril ja kontuuril?

CSS-i piirjooned ja äärised moodustavad kaks välimist kihti CSS-kasti mudel, istub piiride ja servade vahel. Kuigi need omadused on sarnased, on neil erinevad väärtused ja eesmärgid.

Esiteks asuvad CSS-i piirjooned väljaspool piire. See tähendab, et need võivad kattuda sisuga väljaspool elementi, millele neid rakendate. Koos sellega muudavad CSS-i piirid elemendi mõõtmeid, kuid piirjooned mitte.

Kui teil on raskusi ääriste ja kontuuride stiilide visualiseerimisega, võite kasutada oma brauseri arendustööriistad silumiseks neid.

CSS-i piirjooned ja ühisvara väärtused

Vaatamata erinevustele jagavad CSS-i piirid ja piirjooned mõningaid väärtusi. Kõigi jaoks kasutatav stenogramm on samuti väga sarnane.

instagram viewer

CSS Border & Outline Shorthand

Sarnaselt teistele keerukatele CSS-i atribuutidele on stenogrammid saadaval nii ääristele kui ka piirjoontele. Mõlemad atribuudid jagavad oma kiirkirjavalikute jaoks sama vormingut ja see näeb välja selline.

piir: laiusstiilisvärvi;
ülevaade: laiusstiilisvärvi;

See loob reeglid, mis näevad välja sellised, kui need toimivad. Muidugi ei hõlma see stenogramm kõiki nende omaduste jaoks saadaolevaid väärtusi.

ääris: 10px ühevärviline sinine;
kontuur: 20px ühevärviline punane;

Nende stenogrammi CSS-i äärise ja kontuurireeglite tulemuseks on õhuke sinine ääris paksu punase piirjoonega.

Sarnaselt teistele kiirkirja CSS-i atribuutidele saate samade tulemuste saavutamiseks kasutada ka üksikuid atribuute.

CSS-i piiride laius ja piirjoone laius

Ääriste ja piirjoonte laiused on valikulised CSS-i atribuutide väärtused, mis määravad kasutatavate ääriste ja piirjoonte paksuse. Nende atribuutide vorming on sama.

piirjoone laius: 20 pikslit;
äärise laius: 10 pikslit;

Äärised võimaldavad määrata elemendi mõlemale küljele individuaalsed laiused, kuid piirjooned seda ei võimalda. Lisateavet selle kohta saate lugeda järgmistest jaotistest.

CSS-i ääriste ja kontuuride stiilis

CSS-i äärised ja piirjooned on erineva stiiliga. Ühtsed äärised on kõige levinumad, kuid ääriste ja piirjoonte kasutamisega saate olla loominguline.

ääris-stiil: tahke;
kontuuri stiil: täpiline;

Erinevate CSS-i ääriste ja kontuuride stiilide täieliku loendi leiate selle artikli lõpust.

CSS-i piirivärv ja kontuurivärv

Nagu ka teiste värvipõhiste CSS-i atribuutide puhul, aktsepteerivad äärised ja piirjooned kõiki CSS-i seaduslikke värve. See hõlmab hex-koode, RGB-koode, stenogrammi värve ja palju muud.

äärise värv: sinine;
kontuuri värv: #ff0000;

CSS-i ääriste ja piirjoontega töötamisel saate kasutada ka värvigradiente.

CSS-i piiride atribuutide väärtused

Lisaks jagatud vara väärtustele on piiridel ja piirjoontel ka ainulaadseid väärtusi, mida uurida. CSS-i piiridel on kaks ainulaadset omadust, mida tasub õppida.

CSS-i piiriraadius

Raadiuse lisamine elemendi äärisele annab teile palju kontrolli selle kuju üle. Elemendi igal nurgal võib olla erinev raadius ja selle atribuudi saab määrata isegi siis, kui äärise stiiliks on seatud mitte ühtegi.

piiri raadius: 20 pikslit;

Kõigi nurkade raadiuse muutmiseks saate määrata ühe väärtuse.

Samuti saate nurgad jagada rühmadesse: ülemine vasak/all parem ja ülemine parem/all vasak.

äärise raadius: 10 pikslit 20 pikslit;

See muudab HTML-i elementidega huvitavate kujundite loomise lihtsaks.

Lõpuks saate määrata igale nurgale oma raadiuse.

piiri raadius: 10px 20px 30px 40px;

Need väärtused kehtivad päripäeva alates vasakust ülanurgast.

CSS-i piiride külje omadused

Erinevalt piirjoontest saate määrata äärise mõlemale küljele unikaalse väärtuse paljude selle omaduste jaoks. See võimaldab anda elemendi igale küljele erineva laiuse.

ääris-vasak-laius: 10px;
ääris-parem-laius: 20px;
ääriste laius: 30 pikslit;
äärise-ala laius: 40px;

Samuti saate määrata elemendi mõlemale küljele sõltumatud CSS-i ääriste stiilid.

ääris-vasak-stiil: tahke;
ääris-parem-stiil: punktiir;
border-top-style: katkendlik;
border-bottom-style: kahekordne;

Ja soovi korral saate muuta mõlema külje värvi.

ääris-vasak stiil: sinine;
ääris-parem-stiil: #ff0000;
border-top-style: #00ff00;
border-bottom-style: rgb (0, 0, 255);

CSS-i ääriste küljed töötavad niimoodi kombineerides tavalise stenogrammiga.

ääris-vasak: 10px ühevärviline sinine;
ääris-parem: 20px punktiir #00ff00;
border-top: 30px kriipsuga #ff0000;
ääris-alumine: 40px kahekordnergb(0, 0, 255);

CSS Outline Property Values

Sarnaselt CSS-i ääristele on ka kontuuridel ainulaadne omadus; piirjoon-nihe.

CSS-i piirjoone nihe

Kontuurile nihke lisamine loob ruumi enda ja põhielemendi vahele. See nihe peab olema kontuuri mõlemal küljel sama ja atribuut aktsepteerib ainult ühte väärtust.

piirjoone nihe: 10 pikslit;

See võib olla hea viis kasutada oma elementide jaoks kolmandat äärist, mis sobib teie taustavärviga.

CSS-i piiride ja kontuuride stiilid

Nii piirid kui ka piirjooned vajavad toimimiseks stiili. Valikus on kümme saadaolevat stiili, sealhulgas äärised, mida üldse ei kuvata.

ääris-stiil: tahke;
ääriste stiil: punktiir;
ääriste stiil: katkendlik;
ääris-stiil: soon;
ääris-stiil: ridge;
ääriste stiil: kahekordne;
ääriste stiil: sisestus;
ääriste stiil: alguses;
ääriste stiil: peidetud;
ääriste stiil: puudub;

Äärised jagavad piirjoontega samu stiile, kuid atribuudiks on määratud piirjoone stiil.

Kuidas kasutada CSS-i piire ja piirjooni

Kontuurid ja äärised on suurepärased kujundustööriistad veebisaitide loojatele. Nende CSS-i atribuutidega saate määrata oma veebisaidi välimuse ja tunde, kuid peate olema loominguline.