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 -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren
kleuren RGB HEX HSL
CSS-achtergronden
Achtergrond kleur Achtergrond afbeelding achtergrond herhaling Achtergrondbijlage Achtergrond steno
CSS-randen
grenzen Grensbreedte Rand kleur Rand Zijkanten Grensverkorting Afgeronde randen
CSS-marges
Margins Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-lettertypen
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven
Float Clear Float Examples
CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-dropdownmenu's CSS-afbeeldingengalerij CSS-afbeeldingssprites CSS Attr-kiezers CSS-formulieren CSS-tellers CSS-websitelay-out CSS-eenheden CSS-specificiteit CSS !belangrijk CSS wiskundige functies

CSS Geavanceerd

CSS afgeronde hoeken CSS-randafbeeldingen CSS-achtergronden CSS-kleuren CSS-kleurzoekwoorden CSS-verlopen
Linear Gradients Radial Gradients Conic Gradients
CSS-schaduwen
Shadow Effects Box Shadow
CSS-teksteffecten CSS-weblettertypen CSS 2D-transformaties CSS 3D-transformaties CSS-overgangen CSS-animaties CSS-tooltips Afbeeldingen in CSS-stijl CSS-beeldreflectie CSS-object-fit CSS-objectpositie CSS-maskering CSS-knoppen CSS-Paginering CSS Meerdere kolommen CSS-gebruikersinterface CSS-variabelen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsief

RWD Intro RWD-kijkpoort RWD-rasterweergave RWD-mediaquery's RWD-afbeeldingen RWD-video's RWD-frameworks RWD-sjablonen

CSS- raster

Rasterintro Rastercontainer Rasteritem

CSS SASS

SASS-zelfstudie

CSS- voorbeelden

CSS-sjablonen CSS-voorbeelden css-quiz CSS-oefeningen CSS-certificaat

CSS- referenties

CSS-referentie CSS-kiezers CSS-functies CSS Referentie Auditief CSS webveilige lettertypen CSS animeerbaar CSS-eenheden CSS PX-EM-converter CSS-kleuren CSS-kleurwaarden CSS-standaardwaarden Ondersteuning voor CSS-browser

CSS -randafbeeldingen

❮ Vorig Volgende ❯

CSS-randafbeeldingen

Met de CSS border-image-eigenschap kunt u een afbeelding instellen die moet worden gebruikt als de rand rond een element.

CSS border-image eigenschap

Met de CSS border-image-eigenschap kunt u een afbeelding specificeren die moet worden gebruikt in plaats van de normale rand rond een element.

Het pand bestaat uit drie delen:

  1. De afbeelding die als rand moet worden gebruikt
  2. Waar moet de afbeelding worden gesneden
  3. Definieer of de middelste secties herhaald of uitgerekt moeten worden

We zullen de volgende afbeelding gebruiken (genaamd "border.png"):

Grens

De border-imageeigenschap neemt de afbeelding en verdeelt deze in negen secties, zoals een boter-kaas-en-eieren bord. Vervolgens worden de hoeken op de hoeken geplaatst en worden de middelste secties herhaald of uitgerekt zoals u opgeeft.

Opmerking: om border-imagete werken, heeft het element ook de bordereigenschap set nodig!

Hier worden de middelste delen van de afbeelding herhaald om de rand te maken:

Een afbeelding als rand!

Hier is de code:

Voorbeeld

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

Hier worden de middelste delen van de afbeelding uitgerekt om de rand te maken:

Een afbeelding als rand!

Hier is de code:

Voorbeeld

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

Tip: De border-imageeigenschap is eigenlijk een steno-eigenschap voor de eigenschappen border-image-source, border-image-slice, border-image-widthen .border-image-outsetborder-image-repeat

CSS-randafbeelding - Verschillende segmentwaarden

Verschillende segmentwaarden veranderen het uiterlijk van de rand volledig:

Voorbeeld 1:

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

Voorbeeld 2:

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

Voorbeeld 3:

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

Hier is de code:

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;
}

Test jezelf met oefeningen

Oefening:

Geef het div-element een afbeeldingsrand. Gebruik de eigenschap korte hand om de details van de afbeeldingsrand te definiëren.

<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>

Eigenschappen CSS-randafbeelding

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

❮ Vorig Volgende ❯