I HTML, for å tegne eller plassere grenser inne i en div beholder, eksisterer det en enkel metode. Brukere kan bruke CSS “grense”Eiendom og flytt den inn i elementets boks ved hjelp av CSS”Bokseskygge”Eiendom med en innsatt verdi og angi verdien. Dessuten, "Bokstørrelse”Brukes til å definere boksestørrelsen, og verdien”grenseboks”Inkluderer polstring og kant i elementets bredde og høyde.

Dette innlegget vil forklare prosedyren for å plassere grensen inne i div og ikke på kanten.

Hvordan du plasserer grensen inne i div og ikke på kanten?

For å plassere grensen inne i diven og ikke på kanten, prøv den nevnte prosedyren.

Trinn 1: Sett inn overskrift

Først må du legge til en overskrift ved hjelp av en overskriftskode fra "

" til "

”. Å gjøre det, den

Taggen brukes:

Linuxhint Ltd UK

Trinn 2: Lag Div Container

Neste, bruk "”Tag for å lage en beholder. Sett også inn klasseattributtet i div åpningsmerket. Brukere kan også legge til flere klasseattributter i Single Div Container ved å tilordne navn til en klasseattributt. For eksempel vil vi angi tre forskjellige klassenavn i en container "eske”,“sirkel”, Og“grense”:

Trinn 3: Stiloverskrift

Få tilgang til overskriften og bruk forskjellige CSS -egenskaper for styling:

H1
Font-stil: kursiv;
Farge: blå;

Her:

• “fontstil”Eiendom spesifiserer skriftstilen som“kursiv”.
• “farge”Brukes for å sette overskriftsfargen som“blå”.

Trinn 4: Stil "Box" -klasse

Få tilgang til “.eske”Klasse ved hjelp av DOT -velgeren. Bruk deretter følgende CSS -egenskaper:

.Boks
Høyde: 160px;
Bredde: 160px;
Bakgrunn: RGB (161, 229, 250);
Margin: 20px 50px;

I følge den gitte kodebiten:

• “høyde”Definerer størrelsen på elementet vertikalt.
• “bredde”Eiendom tildeler en spesifikk bredde til elementet.
• “bakgrunn”Eiendom setter en spesifikk farge på elementets bakgrunn.
• “margin”Definerer mellomrom rundt elementet.

Produksjon

Trinn 5: Stil "Border" -klasse

Bruk “.grense”For å få tilgang til den andre klassen og bruke egenskaper som er listet opp nedenfor:

.grense
Grense: 20px Solid RGB (161, 229, 250);
Bokstørrelse: Border-Box;
Bokseskygge: Innsett 0px 0px 0px 12px RGB (15, 15, 15);

Her:

• “grense”Eiendom definerer en grense utenfor elementet.
• “Bokstørrelse”Brukes for å definere størrelsen på boksen, og verdien“grenseboks”Inkluderer polstring og kant i elementets bredde og høyde.
• “Bokseskygge”Eiendom setter inn en skygge utenfor et element. For å gjøre det, “innsatt”Verdien er satt med en spesifikk farge som“RGB (15, 15, 15)”.

Produksjon

Trinn 6: Stil "sirkel" -klasse

Få tilgang til tredje klasse ved å bruke sin “.sirkel”:

.sirkel
Border-Radius: 50%;

Deretter bruker du “Border-Radius”Eiendom for å gjøre kurven rundt fra alle sider. Mer spesifikt vil den bli brukt for å gjøre den ytre grensen hjørne rundt i form av et element. Brukere kan lage sirkulære hjørner ved hjelp av en enkelt radius eller elliptiske hjørner med to radier.

Produksjon

Det handlet om å plassere grensen inne i div og ikke på kanten.

Konklusjon

For å plassere grensen inne i diven og ikke på kanten, oppretter du først en div container ved hjelp av "”. Deretter legger du til en grense ved å bruke "grense”Eiendom og bruk”Bokstørrelse”For å definere størrelsen på boksen. Verdien inkluderer en grense og polstring i elementets bredde og høyde. Etter det, bruk "Bokseskygge”Eiendom som setter inn en skygge utenfor et element. Denne oppskrivningen demonstrerte prosedyren for å plassere grensen inne i en div, men ikke på kanten.