Ez a blog a következőket tárgyalja:

• Mi az a körvonali sugár?
• Hogyan alkalmazhatunk körvonali sugár effektust a HTML elemre?

Mi az a körvonali sugár?

Az ' vázlat ” tulajdonság az elem körvonalának alakítására szolgál, de közvetlenül nem valósítható meg. Ezért a sugárhatás alkalmazásának alternatív módszere egy „ határ-sugár ” CSS tulajdonság. Meghatározza a körvonalak lekerekített sarkait.

Hogyan alkalmazhatunk körvonali sugár effektust a HTML elemre?

Az outline radius tulajdonság használatához kövesse a megadott utasításokat.

1. lépés: Címsorok beágyazása

Kezdetben ágyazza be a címsorokat bármely címszó használatával a '

' nak nek '

”. Például felhasználtuk a „

” és „

” címkék két különböző címsor beágyazásához egy HTML dokumentumba.

2. lépés: Adja hozzá az első div tárolót

Ezután adjon hozzá egy tárolót a „

” címke. Illessze be a „ osztály ” attribútumot, és választása szerint adja meg az osztály nevét.

---

---

3. lépés: Hozzon létre második div tárolót

Hozzon létre egy másikat div ” konténer ugyanazt az eljárást követve:

< h1 stílus = 'szín:rgb(48, 10, 218)' > Linuxhint LTD Egyesült Királyság < / h1 >

< h2 >

Különböző példák a határsugárra egy körvonal sarkainak létrehozásához.

< / h2 >

< div osztály = 'box1-div' >

A Linuxhint a legjobb és legegyedibb tartalmat kínálja felhasználóinak.

< / div >

< div osztály = 'box2-div' >

Több kategóriában működik.

< / div >

A fenti kód kimenete az alábbiakban látható:

4. lépés: Állítsa be az első tartály körvonalát

Az első tároló eléréséhez használja a „ .box1-div ' osztály, ahol a ' . ” egy választó az osztály eléréséhez:

.box1-div {

vázlat : szilárd ;

szélesség : 300 képpont ;

párnázás : 15 képpont ;

árrés : 25 képpont ;

}

Ezután alkalmazza az alább felsorolt ​​CSS-tulajdonságokat:

• Az ' vázlat ” tulajdonság segítségével körvonalat adunk az elem köré. Például az értéke a következőképpen van beállítva: szilárd ”.
• ' szélesség ” az elem vízszintes méretét adja meg.
• ' párnázás ” az elem tartalma körüli tér kiosztására szolgál.
• ' árrés ” adja meg a szóközt az elemszegély külső oldalán.

5. lépés: Állítsa be a második tartály körvonalát

Most érje el a második elemet a megfelelő osztály segítségével ' .box2-div ”:

.box2-div {

vázlat : szilárd ;

határ-sugár : 20 képpont ;

szélesség : 300 képpont ;

párnázás : 15 képpont ;

árrés : 25 képpont ;

}

Alkalmazza a CSS tulajdonságot ' határ-sugár ” az elem sugarának meghatározásához. Ez a tulajdonság lehetővé teszi lekerekített sarkok hozzáadását az elemhez:

Észrevehető, hogy sikeresen hozzáadtuk a körvonal sugár effektust a HTML elemhez.

Következtetés

Az ' körvonal-sugár ' már nem elérhető. A felhasználók a körvonal sugár tulajdonságait a CSS „outline” és „border-radius” tulajdonságok segítségével alkalmazhatják. Az ' vázlat ' körvonalat ad az elem köré, és a ' határ-sugár ” kifejezetten a körvonal formázására szolgál. Ez a bejegyzés bemutatja a körvonali sugár effektus hozzáadására vonatkozó utasításokat az elem körül a HTML-ben.