84 of 313 menu

Funktionen drop-shadow

Funktionen drop-shadow låter dig lägga till en skugga till en bakgrundsbild.

Syntax

selektor { filter: drop-shadow(förskjutning x, förskjutning y, oskärperadius, färg); }

Värden

Värde Beskrivning
förskjutning x Skuggans förskjutning i horisontell led relativt bakgrunden. Ett positivt tal betyder att skuggan förskjuts åt höger, ett negativt - åt vänster. Obligatorisk parameter.
förskjutning y Skuggans förskjutning i vertikal led relativt bakgrunden. Ett positivt tal betyder att skuggan förskjuts nedåt, ett negativt - uppåt. Obligatorisk parameter.
oskärpa Sätter skuggans oskärperadius. Ju högre värde, desto mer oskarp blir skuggan. Frivillig parameter. Som standard är den 0.
färg Skuggans färg. Frivillig parameter. Som standard sätts skuggans färg till svart.

Exempel

Låt oss sätta en blå skugga för vår bild utan förskjutning längs axlarna, med en oskärpa på 5px:

<div id="elem"></div> #elem { filter: drop-shadow(0 0 5px #035470); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Se även

  • funktionen blur,
    som oskärpar bakgrunden
  • funktionen brightness,
    som sätter ljusstyrkan för bakgrunden
  • funktionen contrast,
    som sätter kontrasten för bakgrunden
  • funktionen hue-rotate,
    som sätter nyansen för bakgrunden
  • funktionen invert,
    som inverterar bakgrundens färger
  • funktionen opacity,
    som sätter transparensen för bakgrunden
  • funktionen sepia,
    som omvandlar bakgrunden till sepia
  • egenskapen background,
    som är en sammanfattande egenskap för bakgrunden
  • egenskapen background-image,
    som används för att sätta en bakgrundsbild för ett element
Svenska
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa