CSS -styling er en kjernedel av HTML som brukes til å gjøre et nettsted presentabel. CSS tillater forskjellige stylingegenskaper, hvorav den ene er "grensebilde”Eiendom. Ved hjelp av den nevnte eiendommen kan du sette et bilde som en kant av et HTML -element i stedet for den typiske grensestilen.

Denne guiden vil vise hvordan du bruker CSS Border-Image-eiendommen.

Hvordan bruke CSS Border-Image Property?

Border-bilderegenskapen brukes til å sette bildet som en grense rundt et element.

Syntaks

Syntaks for egenskapen Border-Image er:

Border-Image: Kilde skive / bredde starter repetisjon

Border-Image er en kortfattet eiendom av CSS som har fem forskjellige egenskaper som:

• Border-Image Source: Den brukes til å spesifisere bildekilden.
• Border-Image-Slice: Det brukes til å skive bildet av grensen.
• Border-Image-bredde: Den brukes til å sette grensens bredde.
• Border-Image-Outset: Det brukes til å sette mengden plass grensebildet tar opp fra grenserammen.
• BORDE-IMAGE-REPEAT: Det brukes til å unngå repetisjon av grensebildet og fylle grenseområdet.

Merk: Hvis vi bare spesifiserer bildekilden i stedet for alle verdier, settes bildegrensen i henhold til standardverdiene til disse egenskapene.

For å forstå perfekt, flytt til det praktiske eksemplet på grensemessige eiendommer.

Eksempel: Å sette et bilde som grense til grensemessige eiendommer

For å lage en bildegrense rundt et element, først, legg til et element i en HTML -fil. For å gjøre det, vil vi lage en og tildele en “grense”Klasse til det. Etter det vil vi legge til en overskrift og avsnitt ved hjelp av

og

Tagger.

Html

Linuxhint

Bildegrensen

Flytt nå til CSS og bruk grense-bilderegenskaper på den opprettede beholderen.

Her har vi brukt “.grense”For å få tilgang til diven som er opprettet i HTML. Deretter vil vi bruke "grense”Eiendom til det og setter grensenes verdier som“30px”Og“fast”, Henholdsvis. I neste trinn vil vi bruke "grensebilde”Eiendom og angi verdiene for kilde, skive, bredde, begynnelsen og gjenta som“bilde.jpg”,“50”,“30px”,“40px”, Og“rund”. Videre vil vi tildele verdien av den tekstjusterte egenskapen som “senter”, Font-size-eiendom som“50px”, Og fargeegenskaper som“RGB (3, 59, 7)”For å style overskriften og avsnittet.

CSS

.grense
Grense: 30px faststoff;
Border-Image: URL ('Bilde.jpg ') 50 / 30px 40px runde;
tekst-align: sentrum;
Font-størrelse: 50px;
Farge: RGB (3, 59, 7);

Når du har implementert den ovennevnte koden, kan du gå til HTML -filen og utføre den. Som et resultat vil du se følgende utgang:

Det ovennevnte bildet indikerer at grensemessige eiendommer blir implementert.

Eksempel 2: Sette et bilde som grense med standardverdier for grensemessige eiendommer

I dette eksemplet vil vi bare spesifisere bildekilden og sjekke effekten av den på egenskapen for bildeoverskridelser.
Her vil vi bare tildele bildekilden som “bilde.jpg”Til grensemessige eiendommer. De resterende egenskapene vil være de samme, i henhold til forrige eksempel.

CSS

.grense
Grense: 30px faststoff;
Border-Image: URL ('Bilde.jpg ');
tekst-align: sentrum;
Font-størrelse: 50px;
Farge: RGB (3, 59, 7);

Produksjon

Her kan vi se at bildegrensen bare er plassert i hjørnene av Div. Det er fordi “grensebilde”Eiendom bruker forhåndsdefinerte verdier for alle de gjenværende parametrene.

Konklusjon

“grensebilde”Eiendom brukes til å sette bildet som en grense rundt alle HTML -elementer. Du kan angi forskjellige verdier av grensemessige eiendommer for styling av grensen. Hvis du ikke spesifiserer noen verdier for dens parametere, vil egenskapen. I denne artikkelen har vi forklart hvordan du kan legge til et bilde som en grense ved bruk av grensemessige eiendommer.