En HTML -nettsteds stil styres av CSS, som også er en grunnleggende del av HTML. En av stylingegenskapene levert av CSS er "grense”Eiendom. Stort sett er grenser opprettet utenfor elementene, men CSS lar oss sette inn en grense inne i et element ved hjelp av forskjellige egenskaper, som er kasseskygge, disposisjon og kassestørrelse.

I denne artikkelen lærer vi prosedyren for å plassere grenser inne i Div ved hjelp av:

• Bokseskygge eiendom
• Skissere med kontur-offset-eiendom
• Eiendom i boksen

Så la oss starte!

Metode 1: Plasser en grense inne i en div ved hjelp av "Box-Shadow" -egenskaper

Vi kan plassere en grense inne i div ved hjelp av “Bokseskygge”Eiendom. Så først, gå gjennom boksegenskapen og dens funksjonalitet.

Hva er "Box-Shadow" -egenskaper?

I CSS, “Bokseskygge”Eiendom lar oss sette en skygge til ethvert element eller et bilde. Denne egenskapen er basert på følgende verdier:

• offset-x: Det brukes til å legge til horisontal skygge.
• offset-y: Det brukes til å legge til vertikal skygge.
• farge: Den brukes til å plassere fargen på skyggen.

Syntaks

For å avklare disse punktene, la oss gå til syntaks for boksen-skygge-egenskapen:

Bokseskygge: Offset-X Offset-y Blur-Radius spredt fargeinnsats;

Her er beskrivelsen relatert til de ovennevnte verdiene:

• “Offset-X”Og“offset-y”Kan være positiv eller negativ.
• “Blur-Radius”Gjør skyggen lysere eller lettere.
• Ved bruk av "spre”, Kan du stille størrelsen på skyggen.
• I stedet for “farge”, Du vil tilordne hvilken som helst farge du vil gi til bildet.
• “innsatt”Brukes til å sette skyggen inne i elementet. Hvis du ikke bruker den, vises en skygge utenfor boksen.

Merk: “Blur-Radius”,“spre”, Og“innsatt”Er de valgfrie verdiene for boksen Skygge-egenskapen. Du kan bruke disse verdiene i noen spesielle tilfeller.

For en bedre forståelse av bruken av boksen-skyggeegenskapen, la oss implementere et praktisk eksempel.

Eksempel

I HTML -delen oppretter vi en beholder ved hjelp av tag og overskrift

inni det.

Html

"Solid grense inne i diven"

Neste, i CSS -filen, vil vi bruke “div”For å få tilgang til den allerede opprettet div og plassere grensen inni den ved å følge de gitte instruksjonene:

• Angi divens bredde og høyde som “700px”Og“250px”.
• Spesifiser tekstfargen som "RGB (13, 214, 214)”.
• Angi verdiene for tekstjustering ved hjelp av linjehøyde-egenskapen som "200px”Og tekst-justerende egenskap som“senter”.
• Ved å bruke bakgrunnsegenskapen, sett bakgrunnsfargen til DIV som “svart”.
• Opprette en grense ved å bruke grenseeiendommer med "15px”Bredde,“fast”Form, og“svart”Farge.
• For innsiden av skyggen, bruk "Bokseskygge”Eiendom og angi verdien av Offset-X, Offset-Y og Blur som“0px”, Spredt som“5px”, Fargen på skyggen som“RGB (255, 251, 0)”Og bruk“innsatt”For å plassere grensen inne i diven.

CSS

div
Bredde: 700px;
Høyde: 250px;
Farge: RGB (255, 238, 0);
linjehøyde: 200px;
tekst-align: sentrum;
Bakgrunn: svart;
Grense: 15px solid svart;
Bokseskygge: 0px 0px 0px 5px RGB (255, 238, 0) innsatt;

Merk: Verdien av offset-x og offset-y er satt som 0 fordi vi trenger grenser på alle sider av diven.

Etter å ha implementert den gitte koden, gå til HTML -filen og utfør den for å se følgende utfall:

Merk: Ved å øke verdien av "spre”, Kan du øke bredden på grensen.

Metode 2: Plasser en grense inne i en div ved hjelp av "Outline" og "Outline-offset" -egenskapen

“skissere”Eiendom brukes til å sette linjen utenfor elementet. Det er den korte eiendommen til “konturbredde”,“konturstil”, Og“Konturfarge”. Syntaksen til konturegenskapen er som følger:

Oversikt: Oversiktsbelastningsbredde Outline-stil disposisjonsfarge

Her er beskrivelsen relatert til de ovennevnte verdiene:

• konturbredde: Det brukes til å sette bredden på omrisset.
• Oversiktsstil: Det brukes til å sette stilen til omrisset.
• Konturfarge: Den brukes til å spesifisere omrissfargen.

Tilsvarende "Oversiktsveksten”Eiendom brukes til å sette rommet mellom kanten av elementet og omrisset. Dette rommet er gjennomsiktig. Syntaksen til egenskapen til konturforskyvningen er:

Oversikts-offset: verdi

I verdien av verdien kan du angi plassen du vil angi mellom kanten av elementet og omrisset. Det skaper en disposisjon inne i elementet når en negativ verdi er spesifisert.

La oss flytte til eksemplet med å skape en grense inne i Div.

Eksempel

I dette eksemplet vil vi lage to div med klassenavn “Div1”Og“Div2”Og legg til en overskrift inni den ved hjelp av

stikkord.

Html

"Ridge grenser inne i div"

"Dobbelt grense inne i Div"

I CSS, bruk "Div1”For å få tilgang til beholderen vi har opprettet i HTML -filen. Følg de gitte instruksjonene:

• Angi divens bredde og høyde som “500px”.
• Juster grensens radius til “50%”.
• Angi fargen på teksten som "RGB (13, 214, 214)”.
• Angi verdiene for tekstjustering ved hjelp av linjehøyde-egenskapen som "500px”Og tekst-justerende egenskap som“senter”.
• Ved å bruke bakgrunnsegenskapen, sett bakgrunnsfargen til DIV som “svart”.
• Opprett en grense ved å bruke grenseeiendommer som “15px”,“fast”, Og“svart”.
• For innsiden av grensen, bruk "skissere”Eiendom og angi verdien som“10px”,“ridge”, Og“RGB (0, 255, 242)”Og angi verdien av“Oversiktsveksten" som "-25px”For å plassere grensen inne i diven.

CSS

.div1
Bredde: 500px;
Høyde: 500px;
Border-Radius: 50%;
Farge: RGB (13, 214, 214);
linjehøyde: 500px;
tekst-align: sentrum;
Bakgrunn: svart;
Oversikt: 10px Ridge RGB (0, 255, 242);
Oversiktskostnader: -25px;

For styling av den andre diven, endrer bare stilen på konturen ved å bruke "skissere”Eiendom og angi verdiene som følger:

Oversikt: 10px dobbel RGB (0, 255, 242);

Metode 3: Plasser en grense inne i en div ved hjelp av "bokstørrelse" -egenskaper

CSS “Bokstørrelse”Eiendom beregner elementets bredde og høyde. Syntaks for eiendommen i boksen er:

Bokstørrelse: Verdi

I verdien av verdien kan du angi verdien av kassestørrelse som "Innholdsboks”Og“grenseboks”.

Eksempel

I eksemplet nedenfor vil vi opprette et DIV -klassenavn "Div1”Og legg til en overskrift inni den.

Html

"Groove grensen inne i div"

I CSS vil vi bruke “Div1”For å få tilgang til den opprettede div. Deretter setter du grensen inn i diven som følger:

• Angi divens bredde og høyde som “550px”.
• Angi fargen på teksten som "RGB (2, 255, 137)”.
• Angi verdiene for justering av tekst ved hjelp av linjehøyde-egenskapen som "420px”Og tekst-justerende egenskap som“senter”.
• Ved å bruke bakgrunnsegenskapen, sett bakgrunnsfargen til DIV som “svart”.
• Lag en grense ved å bruke grenseegenskaper som “50px”,“spor”, Og“RGB (81, 255, 0)”.
• Deretter, bruk "grense”Eiendom og angi verdien som“50px”,“spor”, Og“RGB (81, 255, 0)”Og angi verdien av“Bokstørrelse" som "grenseboks”For å plassere grensen inne i diven.

.div1
Bredde: 550px;
Høyde: 550px;
Farge: RGB (2, 255, 137);
linjehøyde: 420px;
tekst-align: sentrum;
Bakgrunn: svart;
Grense: 30px Groove RGB (81, 255, 0);
Bokstørrelse: Border-Box;

Etter å ha implementert den gitte koden, vil du se følgende utdata:

Vi har gitt de tre enkleste måtene å plassere en grense inne i en div ved hjelp av CSS.

Konklusjon

For å plassere en grense inne i diven, først, skape en grense ved å bruke "grense”Eiendom, bruk deretter“Bokseskygge”Og“skissere”Med“Oversiktsveksten”Og“Bokstørrelse”Egenskaper til CSS. Grenseegenskapen skaper en grense rundt elementet, og de fire andre egenskapene kan brukes til å flytte grensen innenfor Div. Som et resultat av denne artikkelen har vi vist deg de tre enkleste metodene for å plassere grenser inne i Div.
For å plassere en grense inne i diven, først, skape en grense ved å bruke "grense”Eiendom, bruk deretter“Bokseskygge”Og“skissere”Med“Oversiktsveksten”Og“Bokstørrelse”Egenskaper til CSS. Grenseegenskapen skaper en grense rundt elementet, og de fire andre egenskapene kan brukes til å flytte grensen innenfor Div. Som et resultat av denne artikkelen har vi vist deg de tre enkleste metodene for å plassere grenser inne i Div.