CSS-reunus on keskeinen ominaisuus, jota käytetään HTML-komponenttien reunusten luonnehtimiseen ja tyyliin. Reunat ovat tärkeä osa verkkosivuston rakennetta, ja ne auttavat erottamaan, korostamaan ja tekemään tyylikkään houkuttelevan. CSS:ssä voit käyttää muutamia reunuksiin liittyviä ominaisuuksia hallitaksesi näiden reunusten tyyliä, lajiketta, kokoa ja muotoa. Tässä artikkelissa tutkimme näitä CSS-reunusominaisuuksia ja kuinka niitä todella hyödynnetään.
CSS-reunan ominaisuudet
CSS-reunusominaisuuksia käytetään määrittämään komponentin rajojen tyyli, lajike, leveys ja lasku ja virtaus. Näitä ominaisuuksia ovat:
- rajatyyliin
- reunuksen väri
- reunan leveys
- raja-säde
1) CSS-reunustyylinen
Border style -ominaisuutta käytetään määrittämään reunustyyppi, jonka haluat näyttää verkkosivulla.
Joitakin reunustyylin arvoja käytetään border-style-ominaisuuden kanssa rajauksen määrittämiseen.
| Arvo | Kuvaus |
|---|---|
| ei mitään | Se ei määrittele mitään rajaa. |
| pilkullinen | Sitä käytetään katkoviivan määrittämiseen. |
| katkonainen | Sitä käytetään katkoviivan määrittämiseen. |
| kiinteä | Sitä käytetään kiinteän rajan määrittämiseen. |
| kaksinkertainen | Se määrittää kaksi reunaa, joilla on sama reunuksen leveysarvo. |
| ura | Se määrittää kolmiulotteisen uritetun reunuksen. tehoste luodaan reunan värin arvon mukaan. |
| harjanne | Se määrittää kolmiulotteisen uurteen reunuksen. tehoste luodaan reunan värin arvon mukaan. |
| upotettu | Se määrittää 3D upotetun reunuksen. tehoste luodaan reunan värin arvon mukaan. |
| alussa | Se määrittää 3D-alkureunuksen. tehoste luodaan reunan värin arvon mukaan. |
Esimerkki:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Lähtö:
2) CSS-reunuksen leveys
Bord-width -ominaisuutta käytetään reunan leveyden asettamiseen. Se on asetettu pikseleinä. Voit myös määrittää reunuksen leveyden käyttämällä yhtä kolmesta ennalta määritetystä arvosta, ohut, keskikoko tai paksu.
Huomautus: Reunuksen leveys -ominaisuutta ei käytetä yksinään. Sitä käytetään jatkuvasti muiden rajaominaisuuksien, kuten 'reunustyylin' ominaisuuden kanssa, jotta raja asetetaan ensin muulla tavalla, joka ei toimi.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Lähtö:
3) CSS-reunuksen väri
Reunuksen värin asettamiseen on kolme strategiaa.
- Nimi: Se määrittää värin nimen. Esimerkiksi: 'punainen'.
- RGB: Se määrittää värin RGB-arvon. Esimerkiksi: 'rgb(255,0,0)'.
- Hex: Se määrittää värin hex-arvon. Esimerkiksi: '#ff0000'.
Huomautus: Reunusväri-ominaisuutta ei käytetä yksinään. Sitä käytetään jatkuvasti muiden rajaominaisuuksien, kuten 'reunustyylin' ominaisuuden kanssa, jotta raja asetetaan ensin muulla tavalla, joka ei toimi.
Esimerkki:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Lähtö:
