CSS box-shadow eigenschap

Definitie en gebruik

De eigenschap box-shadow voegt een of meerdere schaduwen toe aan het kader.

Tip:Gebruik de border-image-* eigenschappen om prachtige aanpasbare knoppen te maken!

Zie ook:

CSS3 handleiding:CSS3 rand

HTML DOM referentiehandleiding:boxShadow eigenschap

Voorbeeld

Voeg box-shadow toe aan het div-element:

div
{
box-shadow: 10px 10px 5px #888888;
}

Probeer het zelf uit

Er zijn meer voorbeelden onderin de pagina.

CSS syntaxis

box-shadow: h-shadow v-shadow blur spread kleur inset;

Opmerking:De eigenschap box-shadow voegt een of meerdere schaduwen toe aan het kader. De eigenschap bestaat uit een lijst van schaduwen, gescheiden door komma's, waarbij elke schaduw wordt gedefinieerd door 2-4 lengtewaarden, optionele kleurwaarden en optionele inset-kleuren. Waarden die worden weggelaten zijn 0.

Eigenschapswaarde

Waarde Beschrijving Test
h-shadow Verplicht. De horizontale positie van de schaduw. Negatieve waarden zijn toegestaan. Test
v-shadow Verplicht. De verticale positie van de schaduw. Negatieve waarden zijn toegestaan. Test
blur Optioneel. De vervaagingsafstand. Test
spread Optioneel. De schaduwgrootte. Test
kleur Optioneel. De schaduwkleur. Raadpleeg de CSS-kleurvalerie. Test
inset Optioneel. Verander de externe schaduw (outset) in een interne schaduw. Test

Technische details

Standaardwaarde: geen
Inheritantie: nee
Versie: CSS3
JavaScript syntaxis: object.style.boxShadow="10px 10px 5px #888888"

Meer voorbeelden

De afbeelding die op tafel wordt gegooid
Dit voorbeeld toont hoe je een 'Polaroid'-afbeelding maakt en de afbeelding roteert.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Getallen met -webkit- of -moz- voorafgaand vertegenwoordigen de eerste versie met een prefix.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5