CSS
Box Schatten

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Suche…


Syntax

  • Box-Schatten: keine | h-Schatten-V-Schatten-Unschärfefarbe |

Parameter

Parameter Einzelheiten
Einsatz Standardmäßig wird der Schatten als Schlagschatten behandelt. Das Schlüsselwort "Inset" zeichnet den Schatten innerhalb des Rahmens / Rahmens.
Versatz-x die horizontale Entfernung
Versatz-y der vertikale Abstand
Unschärfe-Radius 0 standardmäßig Wert kann nicht negativ sein. Je größer der Wert, desto größer und heller wird der Schatten.
Ausbreitungsradius 0 standardmäßig Positive Werte bewirken, dass sich der Schatten ausdehnt. Bei negativen Werten schrumpft der Schatten.
Farbe kann aus verschiedenen Notationen bestehen: ein Farbschlüsselwort, hexadezimal, rgb() , rgba() , hsl() , hsla()

Bemerkungen

Browser-Unterstützung:

  • Chrome 10.0
  • IE 9.0
  • Firefox 4.0 3,5 moz
  • Safari 5.1 3.1 -webkit-
  • Opera 10.5

Schlagschatten

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  -webkit-box-shadow: 0px 0px 10px -1px #444444;
     -moz-box-shadow: 0px 0px 10px -1px #444444;
          box-shadow: 0px 0px 10px -1px #444444;
}

innerer Schlagschatten

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
  -webkit-box-shadow: inset 0px 0px 10px 0px #444444;
     -moz-box-shadow: inset 0px 0px 10px 0px #444444;
          box-shadow: inset 0px 0px 10px 0px #444444;
}

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/1/

Nur-Bottom-Drop-Schatten mit einem Pseudoelement

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/2/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  background-color: #1C90F3;
  width: 200px;
  height: 100px;
  margin: 50px;
}

.box_shadow:after {
  content: "";
  width: 190px;
  height: 1px;
  margin-top: 98px;
  margin-left: 5px;
  display: block;
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0px 0px 8px 2px #444444;
     -moz-box-shadow: 0px 0px 8px 2px #444444;
          box-shadow: 0px 0px 8px 2px #444444;
}

Geben Sie hier die Bildbeschreibung ein

mehrere Schatten

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/5/

HTML 

<div class="box_shadow"></div>

CSS 

.box_shadow {
  width: 100px;
  height: 100px;
  margin: 100px;
  box-shadow:
    -52px -52px 0px 0px #f65314,
    52px -52px 0px 0px #7cbb00,
    -52px 52px 0px 0px #00a1f1,
    52px 52px 0px 0px #ffbb00;
}

mehrere Schatten



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow