CSS granica je ključno svojstvo koje se koristi za karakterizaciju i stiliziranje granica oko HTML komponenti. Granice zauzimaju vitalnu ulogu u sastavu web stranice, pomažu u razdvajanju, naglašavanju i elegantnoj privlačnosti. U CSS-u možete upotrijebiti nekoliko svojstava povezanih s obrubom da kontrolirate stil, raznolikost, veličinu i oblik tih obruba. U ovom ćemo članku istražiti ova svojstva obruba CSS-a i kako ih stvarno iskoristiti.
CSS svojstva obruba
Svojstva obruba CSS-a koriste se za određivanje stila, raznolikosti, širine i oseke i oseke obruba komponente. Ova svojstva uključuju:
- rubni stil
- boja ruba
- border-width
- granični radijus
1) CSS stil obruba
Svojstvo stila obruba koristi se za određivanje vrste obruba koji želite prikazati na web stranici.
Postoje neke vrijednosti stila obruba koje se koriste sa svojstvom stil obruba za definiranje obruba.
| Vrijednost | Opis |
|---|---|
| nikakav | Ne definira nikakvu granicu. |
| točkasta | Koristi se za definiranje točkastog obruba. |
| isprekidano | Koristi se za definiranje isprekidane granice. |
| čvrsta | Koristi se za definiranje čvrste granice. |
| dvostruko | Definira dvije granice s istom vrijednošću širine granice. |
| utor | Definira 3D užljebljenu granicu. učinak se generira prema vrijednosti boje ruba. |
| greben | Definira 3d izbočenu granicu. učinak se generira prema vrijednosti boje ruba. |
| umetnuti | Definira 3D umetnutu granicu. učinak se generira prema vrijednosti boje ruba. |
| početak | Definira 3d početnu granicu. učinak se generira prema vrijednosti boje ruba. |
Primjer:
.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 Izlaz:
2) CSS border-width
Svojstvo border-width koristi se za postavljanje širine obruba. Postavlja se u pikselima. Također možete koristiti jednu od tri unaprijed definirane vrijednosti, tanku, srednju ili debelu za postavljanje širine obruba.
Napomena: svojstvo border-width ne koristi se samo. Stalno se koristi s drugim svojstvima obruba kao što je svojstvo 'border-style' da bi se prvo postavila obrub na bilo koji drugi način koji ne bi funkcionirao.
/* 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 Izlaz:
3) Boja obruba CSS-a
Postoje tri strategije za postavljanje boje obruba.
- Naziv: Određuje naziv boje. Na primjer: 'crveno'.
- RGB: Određuje RGB vrijednost boje. Na primjer: 'rgb(255,0,0)'.
- Hex: Određuje heksadecimalnu vrijednost boje. Na primjer: '#ff0000'.
Napomena: svojstvo border-color ne koristi se samo. Stalno se koristi s drugim svojstvima obruba kao što je svojstvo 'border-style' da bi se prvo postavila obrub na bilo koji drugi način koji ne bi funkcionirao.
Primjer:
.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 Izlaz:
