So erstellen Sie einen inneren Schatten in CSS

Die CSS3-Box-Shadow-Eigenschaft wird verwendet, um einen oder mehrere Schatteneffekte eines Elements zu beschreiben. Mit dieser Eigenschaft können Sie nahezu jeden gewünschten Schatteneffekt erzielen. Allerdings sind die Syntax und der Wert des Box-Shadow-Attributs sehr flexibel, was für Anfänger etwas schwer zu verstehen ist.

Mock-Adresse: https://www.html.cn/tool/css3Preview/Box-Shadow.html

CSS Code:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
 
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
 
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
 
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
 
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Wertbeschreibung:

Einsatz: Der Standardschatten liegt außerhalb des Rahmens. Nach der Verwendung von „Einfügen“ befindet sich der Schatten innerhalb des Rahmens (auch eines transparenten Rahmens), über dem Hintergrund und unter dem Inhalt. Manche Leute setzen diesen Wert auch gerne ans Ende, und Browser unterstützen ihn auch.

: Dies sind die ersten beiden legt den horizontalen Versatz fest. Wenn es sich um einen negativen Wert handelt, befindet sich der Schatten auf der linken Seite des Elements. legt den vertikalen Versatz fest. Wenn er negativ ist, wird der Schatten über dem Element platziert. Verfügbare Einheiten finden Sie unter Wenn beide 0 sind, liegt der Schatten hinter dem Element. Wenn zu diesem Zeitpunkt eingestellt ist, tritt ein Unschärfeeffekt auf.

: Dies ist der dritte Je größer der Wert, desto größer der Unschärfebereich und desto größer und heller der Schatten. Darf kein negativer Wert sein. Der Standardwert ist 0. In diesem Fall sind die Schattenkanten scharf.

: Dies ist der vierte Bei einem positiven Wert wird der Schatten größer; bei einem negativen Wert wird der Schatten kleiner. Der Standardwert ist 0. In diesem Fall ist der Schatten so groß wie das Element.

: Siehe Wenn nicht angegeben, wird es vom Browser bestimmt – normalerweise der Farbwert, aber Safari verwendet derzeit transparent.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen inneren Schatten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!