Šīs rokasgrāmatas mērķis ir izskaidrot, kā izveidot apaļas stūra apmales. Lai to izdarītu, vispirms mums ir jāzina par ' robeža ” īpašums. Tātad, sāksim!
Kas ir “robežas” īpašums CSS?
Lai izveidotu apmali ap elementu, jums ir jāizmanto ' robeža ” īpašums. Izmantojot šo rekvizītu, varat iestatīt “ stils ”, “ krāsa ', un ' platums ” no robežas.
Sintakse
Robežas rekvizīta sintakse ir norādīta šādi:
robeža : platuma stila krāsa
Šeit ir iepriekš norādīto vērtību apraksts:
- platums: To izmanto, lai iestatītu apmales platumu.
- stils: To izmanto, lai iestatītu apmales stilu, piemēram, punktētu, svītrotu, viengabalainu vai dubultu.
- krāsa: Tas nosaka apmales krāsu.
Šeit ir piemērs, kurā mēs ieviešam robeža ” īpašums.
Kā izveidot robežu, izmantojot CSS?
Lai izveidotu apmali, vispirms pievienojiet elementu HTML failā. Lai to izdarītu, mēs izveidosim
un
:
< ķermeni >
< div klasē = 'stūris' >
< h1 > Linux padoms < / h1 >
< lpp > Noapaļoti stūri CSS < / lpp >
< / div >
< / ķermeni >
Tālāk mēs pāriesim uz CSS sadaļu.
Šeit “ .stūris ” tiek izmantots, lai piekļūtu klasei, kas piešķirta
.stūris {
robeža : 4 pikseļi ciets rgb ( 248 , 6 , 107 ) ;
platums : 250 pikseļi ;
augstums : 150 pikseļi ;
fona krāsa : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Kad esat ieviesis iepriekš minēto kodu, dodieties uz HTML failu un izpildiet to. Jūs redzēsiet šādu rezultātu:
Tagad mēs pāriesim uz nākamo daļu, kur izveidosim kvadrātveida apmali līdz apaļā stūra apmalei.
Kā apgriezt stūri, izmantojot CSS?
Lai izveidotu apaļu stūra apmali, “ robeža-rādiuss ” tiek izmantots īpašums, kurā varat iestatīt stūra rādiusu atbilstoši savām vēlmēm.
Sintakse
Robežas rādiusa rekvizīta sintakse ir norādīta zemāk:
robeža-rādiuss : vērtībuTurpināsim iepriekšējo piemēru un iestatīsim apmales rādiusu, lai iegūtu apaļus stūrus.
Piemērs
sadaļā “ .stūris ' CSS faila klase, iestatiet vērtību ' robeža-rādiuss ' īpašums kā ' 30 pikseļi ”:
robeža-rādiuss : 30 pikseļi ;Pievienojot iepriekš minēto rindiņu, jūs iegūsit šādu izvadi:
Iepriekš dotā izvade nozīmē, ka apmales ir veiksmīgi nomainītas par noapaļotiem stūriem apmales rādiusa īpašības dēļ.
Secinājums
CSS formātā robeža-rādiuss ” īpašums tiek izmantots, lai mainītu apmaļu stūri. Līknes forma mainās atbilstoši norādītajai rādiusa vērtībai. Izmantojot minēto īpašību, jūs varat iestatīt stūra rādiusu pēc savas izvēles. Šajā rakstā mēs esam izskaidrojuši, kā noapaļot stūra apmales, izmantojot īpašību border-radius, izmantojot piemēru.