CSS -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren CSS-achtergronden CSS-randen CSS-marges CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht CSS-tekst CSS-lettertypen CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk 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 CSS-schaduwen 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 Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox

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


CSS-omtrekverschuiving

De outline-offseteigenschap voegt ruimte toe tussen een omtrek en de rand/rand van een element. De ruimte tussen een element en zijn omtrek is transparant.

In het volgende voorbeeld wordt een omtrek van 15 px buiten de rand aangegeven:

Deze alinea heeft een omtrek van 15 px buiten de rand van de rand.

Voorbeeld

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Het volgende voorbeeld laat zien dat de ruimte tussen een element en zijn omtrek transparant is:

Deze alinea heeft een omtrek van 15 px buiten de rand.

Voorbeeld

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Test jezelf met oefeningen

Oefening:

Stel een effen, 5px omtrekrand in voor het <div> -element.

<style>
div {
  : solid;
  : 5px;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>


Alle CSS-overzichtseigenschappen

Property Description
outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline