English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaften大全

CSS3 box-Usage and examples of shadow attribute

box-The shadow CSS attribute applies one or more shadow effects to the box of an element.

The table below provides usage instructions and version history for this attribute, as well as the syntax for using it in JavaScript scripts.

Default value:none
Applies to:All elements. It also applies to::first-letter。
Inheritance:none
Animaatable:is.View animation properties。
Version: CSS3new feature
JavaScript syntax:object.style.boxShadow="8px 8px 6px #000000"

box-Syntax for using shadow

The syntax of this attribute is as follows:

box-shadow: [, , ... shadowN] | none | initial | inherit
　　　　　　　wohere the shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

Nachfolgende Beispiele zeigen, wie box verwendet wird-Schatten-Eigenschaft.

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　2px　2px　4px　2px　#999;
}
Testen Sie es heraus‹/›

Sie können den Schlüsselwort 'inset' verwenden, um Schatten innerhalb des Elementrahmens anzuwenden. Die eingebetteten Schatten werden innerhalb der Kante gezeichnet, über dem Hintergrund, aber unter dem Inhalt des Elements.

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}
Testen Sie es heraus‹/›

Eigenschaftswerte

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

WertBeschreibung
Erforderlich -Es müssen folgende Werte angegeben werden, um die Eigenschaft gültig zu machen.
offset-xDer erste Längeneinheitswert gibt die horizontale Entfernung des Schattens an. Positive Werte bewegen den Schatten nach rechts, während negative Werte den Schatten nach links bewegen.
offset-yDer zweite Längeneinheitswert gibt die vertikale Entfernung des Schattens an. Positive Werte versetzen den Schatten nach unten, während negative Werte den Schatten nach oben versetzen.
Optional -Die folgenden Werte sind optional.
blur-radiusDer dritte Längeneinheitswert ist der Verwischungsabstand. Je größer der Wert, desto verschwommener wird der Schatten und desto heller wird er. Der Standardwert ist 0, der Schatten ist sehr scharf. Negative Werte sind nicht erlaubt.
spread-radiusDie vierte Längeneinheit ist der Ausdehnungsabstand. Positive Werte erweitern die Schattenform in alle Richtungen um den angegebenen Radius. Negative Werte verkleinern die Schattenform.
colorFarbe ist die Farbe des Schattens. Der Wert kann jeder unterstützte seinFarbwert。Wenn nicht angegeben, ist es normalerweisecolorWert der Eigenschaft.
insetWenn vorhanden, wird der Schatten von der äußeren Schatten in die innere Schatten geändert. Die eingebettete Schatten werden innerhalb der Kante gezeichnet, über dem Hintergrund, aber unter dem Inhalt des Elements.
noneSchatten werden nicht angezeigt. Dies ist der Standardwert.
initialSetzen Sie diesen Wert auf seinen Standardwert.
inheritWenn angegeben, verwendet der verknüpfte Element seine Elternbox-Werte der Schatten-Eigenschaft.

Browserkompatibilität

box-Kompatibilität der Schatten-Eigenschaft der Browser, die Nummern in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

  • Firefox 3.5+ -moz-，4 +

  • Google Chrome 4+ -webkit-，10+

  • Internet Explorer 9+

  • Apple Safari 3.1+ -webkit-，5.1 +

  • Opera 10.5+

Weiterlesen

Siehe folgende Tutorials:CSS3Schatten，CSS Pseudo-Elemente。

zusammenhängende Eigenschaften:text-shadow。

CSS3 box-sizing EigenschaftCSS bottom Eigenschaft