Kas ir HTML kontūras rādiuss?

Kas Ir Html Konturas Radiuss



Lietotāji var uzlabot HTML dokumentu un tīmekļa lapu izkārtojumu, izmantojot CSS. Šim nolūkam tiek izmantoti daudzi CSS rekvizīti, un vieni no tiem ir “outline” un “border-radius”. Konkrētāk, “ kontūru ' rekvizīts tiek izmantots, lai uzzīmētu kontūru, un ' robeža-rādiuss ” tiek izmantots kontūras elementa noapaļoto stūru iestatīšanai.

Š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 “

” tagu. Tāpat ievietojiet ' klasē ” atribūtu un norādiet klases nosaukumu pēc savas izvēles.





3. darbība. Izveidojiet otro div konteineru

Izveidojiet citu ' div ” konteineru, ievērojot to pašu procedūru:



< 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 >

Iepriekš minētā koda izvade ir parādīta zemāk:



4. darbība: iestatiet pirmā konteinera kontūru

Piekļūstiet pirmajam konteineram, izmantojot ' .box1-div 'klase, kurā ' . ” ir atlasītājs, lai piekļūtu klasei:

.box1-div {

kontūru : ciets ;

platums : 300 pikseļi ;

polsterējums : 15 pikseļi ;

starpība : 25 pikseļi ;

}

Pēc tam izmantojiet tālāk norādītos CSS rekvizītus.

  • ' kontūru Īpašums tiek izmantots, lai ap elementu pievienotu kontūru. Piemēram, tā vērtība ir iestatīta kā ' ciets ”.
  • ' platums ” norāda elementa izmēru horizontāli.
  • ' polsterējums ” tiek izmantots, lai piešķirtu vietu ap elementa saturu.
  • ' starpība ” norādiet atstarpi elementa apmales ārējā pusē.

5. darbība: iestatiet otrā konteinera kontūru

Tagad piekļūstiet otrajam elementam, izmantojot atbilstošo klasi ' .box2-div ”:

.box2-div {

kontūru : ciets ;

robeža-rādiuss : 20 pikseļi ;

platums : 300 pikseļi ;

polsterējums : 15 pikseļi ;

starpība : 25 pikseļi ;

}

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.

Secinājums

' 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.