HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure
Kleure RGB HEX HSL
CSS agtergronde
Agtergrondkleur Agtergrondprent Agtergrond Herhaal Agtergrond Aanhangsel Agtergrond Snelskrif
CSS-grense
Grense Grens breedte Rand Kleur Grenskante Grens Snelskrif Afgeronde grense
CSS-marges
Margins Margin Collapse
CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS teks
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS lettertipes
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-ikone CSS skakels CSS-lyste CSS-tabelle
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float
Float Clear Float Examples
CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS -randbeelde

❮ Vorige Volgende ❯

CSS-randbeelde

Met die CSS border-image-eienskap kan u 'n prent instel om as die rand om 'n element te gebruik.

CSS-grensbeeld-eiendom

Die CSS border-image-eienskap laat jou toe om 'n prent te spesifiseer wat gebruik moet word in plaas van die normale grens rondom 'n element.

Die eiendom bestaan ​​uit drie dele:

  1. Die prent om as die rand te gebruik
  2. Waar om die beeld te sny
  3. Definieer of die middelste gedeeltes herhaal of gestrek moet word

Ons sal die volgende prent gebruik (genoem "border.png"):

Grens

Die border-imageeiendom neem die beeld en sny dit in nege afdelings, soos 'n tik-tak-toe-bord. Dit plaas dan die hoeke by die hoeke, en die middelste dele word herhaal of gestrek soos jy spesifiseer.

Let wel: Om border-imagete werk, benodig die element ook die bordereiendomstel!

Hier word die middelste dele van die prent herhaal om die rand te skep:

'n Beeld as 'n grens!

Hier is die kode:

Voorbeeld

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Hier word die middelste dele van die prent gestrek om die rand te skep:

'n Beeld as 'n grens!

Hier is die kode:

Voorbeeld

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Wenk: Die border-imageeiendom is eintlik 'n snelskrif-eiendom vir die border-image-source, border-image-slice, border-image-width, border-image-outset en border-image-repeateiendomme.

CSS border-image - Verskillende snywaardes

Verskillende snywaardes verander die voorkoms van die grens heeltemal:

Voorbeeld 1:

border-image: url(border.png) 50 ronde;

Voorbeeld 2:

border-image: url(border.png) 20% rond;

Voorbeeld 3:

border-image: url(border.png) 30% rond;

Hier is die kode:

Voorbeeld

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Toets jouself met oefeninge

Oefening:

Gee die div-element 'n beeldrand. Gebruik die korthand-eienskap om die besonderhede van die beeldgrens te definieer.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>

CSS Border Image Eienskappe

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

❮ Vorige Volgende ❯