In deze blog wordt ingegaan op:

• Wat is omtrekstraal?
• Hoe omtrekradiuseffect op HTML-element toe te passen?

Wat is de omtrekstraal?

De ' overzicht ” eigenschap wordt gebruikt om de omtrek van het element vorm te geven, maar kan niet direct worden geïmplementeerd. Daarom is de alternatieve methode om het straaleffect op een omtrek toe te passen een ' grensradius ” CSS-eigenschap. Het specificeert de afgeronde hoeken voor contouren.

Hoe omtrekradiuseffect op HTML-element toe te passen?

Volg de gegeven instructies om de omtrekstraaleigenschap te gebruiken.

Stap 1: koppen insluiten

Sluit in eerste instantie de koppen in door een willekeurige koptag te gebruiken van '

' tot '

”. Zo hebben we gebruik gemaakt van de “

' en '

”-tags voor het insluiten van twee verschillende koppen in een HTML-document.

Stap 2: voeg de eerste div-container toe

Voeg daarna een container toe met behulp van de '

' label. Voeg ook de ' klas ” attribuut en specificeer de naam voor de klasse volgens uw keuze.

---

---

Stap 3: Maak een tweede div-container

Maak een ander ' div ” container door dezelfde procedure te volgen:

< h1 stijl = 'kleur:rgb(48, 10, 218)' > Linuxhint LTD VK < / h1 >

< h2 >

Verschillende voorbeelden voor grensradius om de hoeken van een cirkelvormige omtrek te maken.

< / h2 >

< div klas = 'box1-div' >

Linuxhint biedt de beste en meest unieke inhoud voor zijn gebruikers.

< / div >

< div klas = 'box2-div' >

Het werkt op meerdere categorieën.

< / div >

De uitvoer van de bovenstaande code wordt hieronder weergegeven:

Stap 4: stel de omtrek van de eerste container in

Toegang tot de eerste container door gebruik te maken van de ' .box1-div ” klasse waar de “ . ” is een selector om toegang te krijgen tot de klas:

.box1-div {

overzicht : solide ;

breedte : 300px ;

opvulling : 15px ;

marge : 25px ;

}

Pas vervolgens de onderstaande CSS-eigenschappen toe:

• De ' overzicht ” eigenschap wordt gebruikt om een ​​omtrek rond het element toe te voegen. De waarde is bijvoorbeeld ingesteld als ' solide ”.
• “ breedte ” specificeert de grootte van het element horizontaal.
• “ opvulling ” wordt gebruikt voor het toewijzen van de ruimte rond de inhoud van het element.
• “ marge ” specificeer de ruimte aan de buitenkant van de elementrand.

Stap 5: stel de omtrek van de tweede container in

Ga nu naar het tweede element met behulp van de bijbehorende klasse ' .box2-div ”:

.box2-div {

overzicht : solide ;

grensradius : 20px ;

breedte : 300px ;

opvulling : 15px ;

marge : 25px ;

}

Pas de CSS-eigenschap toe ' grensradius ” voor het definiëren van de straal van het element. Met deze eigenschap kunt u afgeronde hoeken rond het element toevoegen:

Het kan worden opgemerkt dat we met succes het effect van de omtrekradius hebben toegevoegd aan het HTML-element.

Gevolgtrekking

De ' omtrekstraal ' is niet langer beschikbaar. Gebruikers kunnen de eigenschappen van de omtrekradius toepassen met behulp van de CSS-eigenschappen 'outline' en 'border-radius'. De ' overzicht ” voegt een omtrek rond het element toe, en de “ grensradius ” wordt specifiek gebruikt voor het stylen van de omtrek. Dit bericht heeft de instructies gedemonstreerd voor het toevoegen van het omtrekstraaleffect rond het element in HTML.