CSS innsats grenser

HTML er programmeringsspråket som gir rammen for websider, mens CSS lar oss tilpasse elementene. Ulike CSS -egenskaper er spesifisert for å implementere forskjellige typer på en webside, inkludert bakgrunnsfarge, skriftstørrelse, grense, grenseradius og bokseskygge. Mer spesifikt, "grensestil”Og“Bokseskygge”Egenskaper brukes til å sette effekter på eller utenfor grensen.

Dette innlegget vil forklare metodene for å sette inn grenser i CSS.

Hva er CSS innsats grenser?

CSS -innsatt grenseverdi er mye brukt med “grensestil”Eiendom for å anvende 3D-grenseeffekten på HTML-elementer, og det avhenger vanligvis av grensefargen verdien.

Det er forskjellige metoder for innsatsgrenser i CSS er listet opp nedenfor:

• Metode 1: Legg inn innsatt kant med “grensestil”Eiendom
• Metode 2: Legg inn innsatt kant med “Bokseskygge”Eiendom

Metode 1: Legg inn innsatt kant til "Border-stil" -eiendommer

Å sette inn grensen til “grensestil”Eiendom, følg den gitte prosedyren:

• Først av alt, lage en overskrift med "

  " stikkord.

• Deretter legger du til “stil”Attributt til å style overskriften i henhold til dine preferanser. For eksempel er overskriften stylet som "Tekstalign: Center”.
• Etter det, legg til tekst for overskriften mellom “

  ”Tagger.

• Lag en div beholder og sett inn en “id" Egenskap:

Innsatt kant

Bruk CSS innsettgrense ved å bruke "Border-stil" -eiendommer

Her kan du bruke CSS -egenskapene på den opprettede DIV -beholderen:

#Border-Div
Bakgrunn: Gjennomsiktig URL (emoji.PNG) 50% uten repetisjon;
Min-Height: 300px;
Min-bredde: 200px;
Margin: 0px 200px;
Border-stil: Inset;

Detaljene om de ovennevnte egenskapene er diskutert nedenfor:

• “bakgrunn”Eiendom brukes til å sette alle egenskaper for bakgrunnsstil samtidig, for eksempel farge, bilde, opprinnelse og størrelse, eller repetisjonsmetoden.
• “Min-Height”Eiendom spesifiserer den laveste høyden for et element.
• “Min-bredde”Funksjonen definerer minst bredde for et element.
• “margin”Eiendom spesifiserer plassen for et element rundt den definerte grensen.
• “grensestil”Eiendom brukes til å style grensen for å vises rundt elementet.
• “innsatt”Verdien brukes til å lage skygger inne i boksen.

Produksjon

La oss gå mot en annen metode for å legge til en innsatt kant.

Metode 2: Legg inn innsatt kant med "Box-Shadow" -egenskaper

For å bruke innsettgrensen til “Bokseskygge”Eiendom, opprette DIV -beholderen ved å følge det samme scenariet:

Innsatt kant

Bruk innsatt kant ved hjelp av "Box-Shadow" -egenskaper

#Border-Div
Bakgrunn: Gjennomsiktig URL (emoji.PNG) 50% uten repetisjon;
Min-bredde: 200px;
Min-Height: 300px;
Margin: 0px 200px;
Bokseskygge: innsats 0 0 10px RGB (228, 164, 27);

Få tilgang til DIV -beholderen ved å bruke “#Border-Div”ID -attributt, og bruk de samme CSS -egenskapene, inkludert“bakgrunn”,“Min-bredde”,“Min-Height”,“margin”, Og“Bokseskygge”. Mer spesifikt:

• “Bokseskygge”Eiendom setter inn en skygge utenfor et element.
• “innsatt”Verdien er definert som skyggen inne i boksen med en spesifikk farge”RGB (228, 164, 27)”.

Produksjon

Alternativt kan brukere legge til flere skyggeverdier for å bygge grensetetthet. For dette formålet, følg den medfølgende koden:

Bokseskygge: innsats 0 0 20px RGB (89, 0, 255), innsatt 0 0 20px RGB (0, 183, 255), innsatt 0 0 20px RGB (0, 183, 255);

Produksjon

Vi har uttalt metoden for å anvende innsettgrensen i CSS.

Konklusjon

CSS innsatsgrenser er 3D -grenser som er satt på HTML -elementene. For å sette innsettgrensen, CSS “grensestil”Og“Bokseskygge”Egenskaper kan brukes. “Innsatt”Verdien av spesifiserte egenskaper er definert for å få skygger og flere effekter inne i grensen. Dette innlegget har vist metodene for å anvende innsatte grenser i CSS.