CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS Box Shadow


Vlastnost CSS box-shadow

Vlastnost CSS box-shadowse používá k aplikaci jednoho nebo více stínů na prvek.


Určete horizontální a vertikální stín

Při jeho nejjednodušším použití určíte pouze vodorovný a svislý stín. Výchozí barvou stínu je aktuální barva textu.

Prvek <div> s rámečkem

Příklad

Určete vodorovný a svislý stín:

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

Určete barvu stínu

Parametr colordefinuje barvu stínu.

Prvek <div> s šedým rámečkem

Příklad

Určete barvu stínu:

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

Přidejte ke stínu efekt rozostření

Parametr blurdefinuje poloměr rozostření. Čím vyšší číslo, tím více bude stín rozmazaný.

Prvek <div> s rozmazaným šedým rámečkem o velikosti 5 pixelů

Příklad

Přidejte do stínu efekt rozostření:

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

Nastavte poloměr šíření stínu

Parametr spreaddefinuje poloměr šíření. Kladná hodnota zvětšuje velikost stínu, záporná hodnota zmenšuje velikost stínu.

Prvek <div> s rozmazaným šedým stínem rámečku s poloměrem šíření 12 pixelů

Příklad

Nastavte poloměr šíření stínu:

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

Nastavte vložený parametr

Parametr insetmění stín z vnějšího stínu (začátek) na vnitřní stín.

Prvek <div> s rozmazaným šedým vloženým stínem

Příklad

Přidejte vložený parametr:

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

Přidat více stínů

Prvek může mít také více stínů:

Příklad

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

karty

Vlastnost můžete také použít box-shadowk vytvoření papírových karet:

1

1. ledna 2021

Norsko

Hardanger, Norsko

Příklad

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;
}

Otestujte se pomocí cvičení

Cvičení:

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