CSS box-shadow egenskap

Definition och användning

box-shadow-egenskapen lägger till en eller flera skuggor till ramen.

Tips:Använd border-image-*-egenskapen för att skapa vackra skalbara knappar!

Se också:

CSS3-tutorial:CSS3 kanter

HTML DOM referenshandbok:boxShadow-egenskap

Exempel

Lägg till box-shadow till div-elementet:

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

Prova själv

Det finns fler exempel längst ner på sidan.

CSS-syntax

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

Kommentar:box-shadow lägger till en eller flera skuggor till ramen. Egenskapen är en lista med skuggor separerade med kommatecken, varje skugga definieras av 2-4 längdvärden, valfria färgvärden och valfria inset-nyckelord. Uppskatta värden är 0.

Egenskapsvärde

Värde Beskrivning Test
h-shadow Obligatorisk. Horisontalskuggans position. Tillåter negativa värden. Test
v-shadow Obligatorisk. Vertikalskuggans position. Tillåter negativa värden. Test
blur Valfritt. Suddig avstånd. Test
spread Valfritt. Skuggans storlek. Test
color Valfritt. Skuggans färg. Se CSS-färgvärden. Test
inset Valfritt. Byt extern skugga (outset) till intern skugga. Test

Tekniska detaljer

Standardvärde: ingen
Arvbarhet: nej
Version: CSS3
JavaScript-syntax: object.style.boxShadow="10px 10px 5px #888888"

Mer exempel

En bild som släpps på bordet
Detta exempel visar hur man skapar ett 'Polaroid'-bild och roterar bilden.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som fullständigt stöder egenskapen.

Tal med -webkit- eller -moz- prefix indikerar den första versionen som används med prefikset.

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