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 handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure
Colors RGB HEX HSL
CSS agtergronde
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS-grense
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS-marges
Margins Margin Collapse
CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS teks
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS lettertipes
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-ikone CSS skakels CSS-lyste CSS-tabelle
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float
Float Clear Float Examples
CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Skadu-effekte Bokskadu
CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS Box Shadow

❮ Vorige Volgende ❯

CSS box-shadow Eiendom

Die CSS- box-shadoweienskap word gebruik om een ​​of meer skaduwees op 'n element toe te pas.

Spesifiseer 'n horisontale en 'n vertikale skaduwee

In sy eenvoudigste gebruik spesifiseer jy net 'n horisontale en 'n vertikale skaduwee. Die verstekkleur van die skaduwee is die huidige tekskleur.

'n <div>-element met 'n boksskadu

Voorbeeld

Spesifiseer 'n horisontale en 'n vertikale skaduwee:

div {
  box-shadow: 10px 10px;
}

Spesifiseer 'n kleur vir die skaduwee

Die colorparameter definieer die kleur van die skaduwee.

'n <div>-element met 'n grys bokskadu

Voorbeeld

Spesifiseer 'n kleur vir die skaduwee:

div {
  box-shadow: 10px 10px grey;
}

Voeg 'n vervaag-effek by die skaduwee

Die blurparameter definieer die vervaag radius. Hoe hoër die getal, hoe meer vaag sal die skaduwee wees.

'n <div>-element met 'n 5px dowwe, grys boksskadu

Voorbeeld

Voeg 'n vervaag effek by die skadu:

div {
  box-shadow: 10px 10px 5px grey;
}

Stel die verspreidingsradius van die skaduwee

Die spreadparameter definieer die verspreidingsradius. 'n Positiewe waarde verhoog die grootte van die skaduwee, 'n negatiewe waarde verminder die grootte van die skaduwee.

'n <div>-element met 'n dowwe, grys boksskadu, met 'n verspreidingsradius van 12px

Voorbeeld

Stel die verspreidingsradius van die skaduwee:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Stel die ingevoegde parameter

Die insetparameter verander die skaduwee van 'n buitenste skaduwee (begin) na 'n binneskaduwee.

'n <div>-element met 'n dowwe, grys, ingeboude bokskadu

Voorbeeld

Voeg die insetparameter by:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Voeg veelvuldige skaduwees by

'n Element kan ook veelvuldige skaduwees hê:

Voorbeeld

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Kaarte

Jy kan ook die box-shadoweiendom gebruik om papieragtige kaarte te skep:

1

1 Januarie 2021

Noorweë

Hardanger, Noorweë

Voorbeeld

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Toets jouself met oefeninge

Oefening:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯