CSS apmale ir galvenais rekvizīts, ko izmanto, lai raksturotu un veidotu apmales ap HTML komponentiem. Robežām ir būtiska nozīme vietnes veidošanā, palīdzot atdalīt, izcelt un padarīt stilīgu pievilcību. Izmantojot CSS, varat izmantot dažus ar apmalēm saistītus rekvizītus, lai kontrolētu šo apmaļu stilu, daudzveidību, izmēru un formu. Šajā rakstā mēs izpētīsim šos CSS apmales rekvizītus un to, kā tos reāli izmantot.
CSS robežu rekvizīti
CSS apmales rekvizīti tiek izmantoti, lai noteiktu komponenta apmaļu stilu, šķirni, platumu un bēgumu un plūsmu. Šīs īpašības ietver:
- apmales stilā
- apmales krāsa
- apmales platums
- robeža-rādiuss
1) CSS apmales stils
Rekvizīts Border style tiek izmantots, lai norādītu apmales veidu, kuru vēlaties rādīt tīmekļa lapā.
Ir dažas apmales stila vērtības, kas tiek izmantotas ar apmales stila rekvizītu, lai definētu apmali.
| Vērtība | Apraksts |
|---|---|
| neviens | Tas nenosaka nekādu robežu. |
| punktēts | To izmanto, lai definētu punktētu robežu. |
| pārtraukts | To izmanto, lai definētu pārtrauktu apmali. |
| ciets | To izmanto, lai noteiktu stingru robežu. |
| dubultā | Tas definē divas apmales ar vienādu apmales platuma vērtību. |
| rieva | Tas nosaka 3D rievotu apmali. efekts tiek ģenerēts atbilstoši apmales krāsas vērtībai. |
| grēda | Tas nosaka 3D izciļņu apmali. efekts tiek ģenerēts atbilstoši apmales krāsas vērtībai. |
| ielaidums | Tas definē 3D ielaiduma apmali. efekts tiek ģenerēts atbilstoši apmales krāsas vērtībai. |
| sākumā | Tas nosaka 3D sākuma robežu. efekts tiek ģenerēts atbilstoši apmales krāsas vērtībai. |
Piemērs:
.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 Izvade:
2) CSS apmales platums
Rekvizīts border-width tiek izmantots, lai iestatītu apmales platumu. Tas ir iestatīts pikseļos. Varat arī izmantot vienu no trim iepriekš definētajām vērtībām — tievs, vidējs vai biezs, lai iestatītu apmales platumu.
Piezīme. Robežas platuma rekvizīts netiek izmantots viens pats. Tas tiek pastāvīgi izmantots kopā ar citiem apmales rekvizītiem, piemēram, “border-style” rekvizītus, lai vispirms iestatītu robežu jebkurā citā veidā, kas nedarbosies.
/* 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 Izvade:
3) CSS apmales krāsa
Ir trīs stratēģijas, lai iestatītu apmales krāsu.
- Nosaukums: tas nosaka krāsas nosaukumu. Piemēram: 'sarkans'.
- RGB: tas nosaka krāsas RGB vērtību. Piemēram: 'rgb(255,0,0)'.
- Hex: tas nosaka krāsas hex vērtību. Piemēram: '#ff0000'.
Piezīme. Apmales krāsas rekvizīts netiek izmantots atsevišķi. Tas tiek pastāvīgi izmantots kopā ar citiem apmales rekvizītiem, piemēram, “border-style” rekvizītus, lai vispirms iestatītu robežu jebkurā citā veidā, kas nedarbosies.
Piemērs:
.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 Izvade:
