Šajā emuārā tiks apspriests:
Kas ir kontūras rādiuss?
' kontūru ” rekvizīts tiek izmantots, lai veidotu elementa kontūru, taču to nevar realizēt tieši. Tāpēc alternatīvā metode rādiusa efekta piemērošanai kontūrai ir izmantot “ robeža-rādiuss CSS īpašums. Tas norāda kontūru noapaļotos stūrus.
Kā HTML elementam lietot kontūras rādiusa efektu?
Lai izmantotu kontūras rādiusa rekvizītu, izpildiet sniegtos norādījumus.
1. darbība. Iegult virsrakstus
Sākotnēji ieguliet virsrakstus, izmantojot jebkuru virsraksta tagu no “ 'uz' ”. Piemēram, mēs esam izmantojuši ' ' un ' ” tagus divu dažādu virsrakstu iegulšanai HTML dokumentā.
2. darbība: pievienojiet pirmo div konteineru
Pēc tam pievienojiet konteineru, izmantojot “ Izveidojiet citu ' div ” konteineru, ievērojot to pašu procedūru: Iepriekš minētā koda izvade ir parādīta zemāk: Piekļūstiet pirmajam konteineram, izmantojot ' .box1-div 'klase, kurā ' . ” ir atlasītājs, lai piekļūtu klasei: Pēc tam izmantojiet tālāk norādītos CSS rekvizītus. Tagad piekļūstiet otrajam elementam, izmantojot atbilstošo klasi ' .box2-div ”: Lietot CSS rekvizītu ' robeža-rādiuss ” elementa rādiusa noteikšanai. Šis īpašums ļauj pievienot noapaļotus stūrus ap elementu: Var pamanīt, ka esam veiksmīgi pievienojuši kontūras rādiusa efektu HTML elementam. ' kontūras rādiuss ' vairs nav pieejams. Lietotāji var lietot kontūras rādiusa rekvizītus, izmantojot CSS rekvizītus “outline” un “border-radius”. ' kontūru ' pievieno kontūru ap elementu un ' robeža-rādiuss ” tiek īpaši izmantots kontūras veidošanai. Šajā ziņojumā ir parādīti norādījumi par kontūras rādiusa efekta pievienošanu ap elementu HTML.
3. darbība. Izveidojiet otro div konteineru
< h1 stils = 'krāsa:rgb(48, 10, 218)' > Linuxhint LTD Lielbritānijā < / h1 >
< h2 >
Dažādi piemēri apmales rādiusam, lai izveidotu kontūras apļa stūrus.
< / h2 >
< div klasē = 'box1-div' >
Linuxhint saviem lietotājiem nodrošina vislabāko un unikālāko saturu.
< / div >
< div klasē = 'box2-div' >
Tas darbojas vairākās kategorijās.
< / div >
4. darbība: iestatiet pirmā konteinera kontūru
kontūru : ciets ;
platums : 300 pikseļi ;
polsterējums : 15 pikseļi ;
starpība : 25 pikseļi ;
}
5. darbība: iestatiet otrā konteinera kontūru
kontūru : ciets ;
robeža-rādiuss : 20 pikseļi ;
platums : 300 pikseļi ;
polsterējums : 15 pikseļi ;
starpība : 25 pikseļi ;
}
Secinājums