CSS-reunukset ovat olennaisia ​​​​elementtejä verkkosivustoilla, jotka edustavat eri komponenttien ja elementtien reunoja. CSS-reunat viittaavat viivoihin, jotka ympäröivät elementtejä ja määrittävät niiden reunat. Reunuksia voidaan muotoilla, värittää ja mitoittaa käyttämällä CSS-ominaisuuksia, kuten reunuksen tyyli, reunuksen väri, reunuksen leveys ja reunuksen säde. reunukset voidaan muotoilla yläreunuksella, oikealla reunuksella, alareunalla ja vasemmalla reunuksella.

Tässä Reunat CSS:ssä -artikkelissa opimme CSS-reunuksista, jotka kattavat tyylivaihtoehdot, käytännön käyttötapaukset ja parhaat käytännöt.

Sisällysluettelo

ääretön silmukka

• Rajan ominaisuudet
• Tapoja muotoilla reunus CSS:ssä
• Yleiset reunatyylit
• Esimerkkejä CSS-reunuksen tyylistä
• Käytännön käyttötapauksia
• CSS Borders -käyttötapaukset

Rajan ominaisuudet

CSS tarjoaa useita ominaisuuksia rajojen mukauttamiseen:

1. rajatyyliin : Määrittää reunuksen tyypin (esim. kiinteä, katkoviiva, katkoviiva).
2. reunan leveys : Asettaa reunuksen leveyden (pikseleinä, pisteinä tai muina yksiköinä).
3. reunuksen väri : Määrittää reunuksen värin.
4. raja-säde : Luo pyöristetyt kulmat elementeille.

Tapoja muotoilla reunus CSS:ssä

The CSS-rajaominaisuus mahdollistaa elementin reunusten muotoilun asettamalla sen leveyden, tyylin ja värin, mikä mahdollistaa mukautettavat visuaaliset rajat verkkosuunnittelussa.

1. Reunuksen tyyli

• CSS-reunuksen yläosan tyylinen ominaisuus
• reuna-oikea-tyylinen omaisuus
• border-bottom-tyylinen omaisuus
• border-left-tyylinen omaisuus

2. Reunuksen leveys

• border-top-width -ominaisuus
• border-right-width -ominaisuus
• border-bottom-width -ominaisuus
• border-left-width -ominaisuus

3. Reunuksen väri

• border-top-color -ominaisuus
• raja-oikea-väri-ominaisuus
• border-bottom-color -ominaisuus
• border-left-color-ominaisuus

4. Reunusta yksittäiset sivut

5. Rajasäteen ominaisuus

Yleiset reunatyylit

Reunustyylinen ominaisuus määrittää reunuksen tyypin. Mikään muista reunusominaisuuksista ei toimi ilman reunatyyliä.

Seuraavat ovat reunusten tyypit:

• Pisteellinen : Luo sarjan pisteitä.
• Katkotettu : Muodostaa katkoviivan.
• Kiinteä : Tuottaa jatkuvan viivan.
• Kaksinkertainen : Muodostaa kaksi yhdensuuntaista suoraa.
• Ura ja Ridge : Luo uurrettuja ja uurteisia 3D-tehosteita.
• Upotettu ja Aluksi : Lisää 3D-sisä- ja alkureunukset.
• Ei mitään : Poistaa reunuksen.
• Piilotettu : Piilottaa reunuksen.

Esimerkkejä CSS reunatyylistä

Tässä esimerkissä aiomme käyttää CSS border-tyylistä ominaisuutta.