CSS-reunukset ja -ääriviivat ovat arvokkaita työkaluja web-suunnittelijoille, jotka haluavat lisätä sivustoon tyylikkyyttä. Niitä on helppo käyttää, kun tiedät kuinka ne toimivat, ja ne ovat riittävän monipuolisia vastaamaan monenlaisiin tarpeisiin. Katsotaanpa CSS-rajoja nähdäksesi, mistä sinun pitäisi aloittaa.

Mitä eroa on reunuksella ja ääriviivalla CSS: ssä?

CSS-ääriviivat ja reunat muodostavat kaksi ulompaa kerrosta CSS-laatikkomalli, istuu rajojen ja marginaalien välissä. Vaikka nämä ominaisuudet ovat samanlaisia, niillä on erilaiset arvot ja tarkoitukset.

Ensinnäkin CSS-ääriviivat ovat rajojen ulkopuolella. Tämä tarkoittaa, että ne voivat olla päällekkäisiä sen elementin ulkopuolisen sisällön kanssa, johon käytät niitä. Tämän lisäksi CSS-reunukset muuttavat elementin mittoja, mutta ääriviivat eivät.

Jos sinulla on vaikeuksia visualisoida reuna- ja ääriviivatyylejä, voit käyttää omaa selaimen kehitystyökalut virheenkorjaukseen niitä.

CSS Border & Outline Shared Property Values

Eroistaan ​​huolimatta CSS: n reunoilla ja ääriviivoilla on joitain yhteisiä arvojaan. Jokaiselle käyttämäsi lyhenne on myös hyvin samanlainen.

instagram viewer

CSS Border & Outline Shorthand

Kuten muissakin monimutkaisissa CSS-ominaisuuksissa, sekä reunoilla että ääriviivoilla on lyhenne. Molemmilla näillä ominaisuuksilla on sama muoto pikavalintavaihtoehdoille, ja se näyttää tältä.

rajaa: leveystyyliväri;
ääriviivat: leveystyyliväri;

Tämä luo sääntöjä, jotka näyttävät tältä, kun ne ovat toiminnassa. Tämä lyhennelmä ei tietenkään kata kaikkia näille ominaisuuksille saatavilla olevia arvoja.

reunus: 10px tasainen sininen;
ääriviivat: 20px tasainen punainen;

Nämä lyhennetyt CSS-reunus- ja ääriviivasäännöt johtavat ohueen siniseen reunukseen, jossa on paksu punainen ääriviiva.

Kuten muutkin lyhennetyt CSS-ominaisuudet, voit myös käyttää yksittäisiä ominaisuuksia saavuttaaksesi samat tulokset.

CSS-reunuksen leveys ja ääriviivojen leveys

Reunusten ja ääriviivojen leveydet ovat valinnaisia ​​CSS-ominaisuusarvoja, jotka määrittävät käyttämiesi reunusten ja ääriviivojen paksuuden. Näiden ominaisuuksien muoto on sama.

ääriviivan leveys: 20 pikseliä;
reunan leveys: 10 pikseliä;

Reunukset mahdollistavat yksittäisten leveuksien asettamisen elementin jokaiselle puolelle, mutta ääriviivat eivät. Voit lukea tästä lisää seuraavissa osioissa.

CSS-reunustyyli ja ääriviivatyyli

CSS-reunukset ja ääriviivat ovat eri tyylejä. Kiinteät reunat ovat yleisimpiä, mutta voit olla luova tapa käyttää reunuksia ja ääriviivoja.

reuna-tyyli: kiinteä;
ääriviivatyyli: pilkullinen;

Löydät täydellisen luettelon erilaisista CSS-reunus- ja ääriviivatyyleistä tämän artikkelin lopusta.

CSS-reunuksen väri ja ääriviivan väri

Kuten muutkin väripohjaiset CSS-ominaisuudet, reunat ja ääriviivat hyväksyvät kaikki CSS: n lailliset värit. Tämä sisältää heksadesimaalikoodit, RGB-koodit, lyhennetyt värit ja paljon muuta.

reunan väri: sininen;
ääriviivan väri: #ff0000;

Voit myös käyttää värigradientteja työskennellessäsi CSS-reunusten ja ääriviivojen kanssa.

CSS Border Property Values

Jaetun omaisuuden arvojen lisäksi rajoilla ja ääriviivoilla on myös ainutlaatuisia arvoja tutkittavana. CSS-rajoilla on kaksi ainutlaatuista ominaisuutta, jotka kannattaa oppia.

CSS-reunan säde

Lisäämällä säteen elementin reunaan voit hallita sen muotoa paljon. Jokaisella elementin kulmalla voi olla eri säde, ja tämä ominaisuus voidaan määrittää, vaikka reunatyyliksi olisi asetettu ei mitään.

reunan säde: 20px;

Voit asettaa yhden arvon muuttaaksesi kaikkien kulmien sädettä.

Voit myös jakaa kulmat ryhmiin ylhäällä vasen/alaoikea ja ylhäällä oikea/alas vasen.

reunan säde: 10px 20px;

Näin on helppo luoda mielenkiintoisia muotoja HTML-elementeilläsi.

Lopuksi voit asettaa kullekin kulmille oman säteen.

reunan säde: 10px 20px 30px 40px;

Nämä arvot ovat voimassa myötäpäivään alkaen vasemmasta yläkulmasta.

CSS-reunuksen sivuominaisuudet

Toisin kuin ääriviivat, voit määrittää reunuksen jokaiselle puolelle ainutlaatuisen arvon monille sen ominaisuuksille. Tämä mahdollistaa elementin kullekin puolelle eri leveyden.

reunus-vasen-leveys: 10px;
reunus-oikea-leveys: 20px;
reunan yläosan leveys: 30 pikseliä;
reunus-ala-leveys: 40px;

Voit myös määrittää erilliset CSS-reunustyylit elementin jokaiselle puolelle.

reuna-vasen-tyyli: kiinteä;
reuna-oikea-tyyli: pisteviiva;
border-top-tyyli: katkoviiva;
border-bottom-tyyli: kaksinkertainen;

Ja voit muuttaa kummankin puolen väriä, jos haluat.

reuna-vasen-tyyli: sininen;
border-right-tyyli: #ff0000;
border-top-tyyli: #00ff00;
border-bottom-style: rgb (0, 0, 255);

CSS-reunuspuolet toimivat tavallisen pikanäppäimen kanssa yhdistääkseen näin.

reunus vasen: 10px tasainen sininen;
raja-oikea: 20px pilkullinen #00ff00;
border-top: 30px katkoviiva #ff0000;
border-bottom: 40px kaksinkertainenrgb(0, 0, 255);

CSS Outline Property Values

Kuten CSS-reunoilla, ääriviivoilla on oma ainutlaatuinen ominaisuutensa; ääriviiva-offset.

CSS-ääriviivapoikkeama

Siirron lisääminen ääriviivaan luo tilan itsensä ja pääelementin välille. Tämän poikkeaman on oltava sama ääriviivan kummallakin puolella, ja ominaisuus hyväksyy vain yhden arvon.

ääriviiva-offset: 10px;

Tämä voi olla siisti tapa hyödyntää elementeillesi kolmatta reunaa, joka vastaa taustaväriäsi.

CSS: n reuna- ja ääriviivatyylit

Sekä reunat että ääriviivat tarvitsevat tyylin toimiakseen. Valittavana on kymmenen tyyliä, mukaan lukien reunat, jotka eivät näy ollenkaan.

reuna-tyyli: kiinteä;
reunatyyli: pilkullinen;
reunatyyli: katkoviiva;
reuna-tyyli: ura;
reuna-tyyli: harjanne;
reunatyyli: kaksinkertainen;
reuna-tyyli: upotettu;
raja-tyyli: alusta;
reunatyyli: piilotettu;
reunatyyli: ei mitään;

Reunukset jakavat samat tyylit ääriviivojen kanssa, vain kun ääriviivatyyli on asetettu ominaisuudeksi.

CSS-rajojen ja ääriviivojen käyttäminen

Ääriviivat ja reunat ovat hyviä suunnittelutyökaluja verkkosivustojen luojille. Voit määrittää verkkosivustosi ulkoasun ja tuntuman näillä CSS-ominaisuuksilla, mutta sinun on oltava luova.