So legen Sie einen Div-Schatten in CSS fest-CSS-Tutorial-php.cn

So legen Sie einen Div-Schatten in CSS fest

青灯夜游

Freigeben： 2023-01-06 11:12:34

Original

28636 Leute haben es durchsucht

In CSS können Sie das Box-Shadow-Attribut verwenden, um einen Div-Schatten festzulegen. Sie müssen dem Div-Element nur den Stil „Box-Shadow: horizontaler Schattenwert, vertikaler Schattenwert, Unschärfeabstand, Schattenfarbe“ hinzufügen ; wobei der Wert „inset“ weggelassen werden kann. Er legt den inneren Schatten fest.

So legen Sie einen Div-Schatten in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css set divshadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Nach dem Login kopieren

Rendering:

So legen Sie einen Div-Schatten in CSS fest

Beschreibung:

box-shadow-Eigenschaft kann eine oder mehrere Dropdown-Schattenboxen festlegen.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Nach dem Login kopieren

Hinweis: Die boxShadow-Eigenschaft fügt der Box einen oder mehrere Dropdown-Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und ein optionales Einfügungsschlüsselwort angegeben werden. Der Wert für die ausgelassene Länge ist 0.

Wert	Beschreibung
h-shadow	Erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt
v-shadow	Erforderlich. Die Position des vertikalen Schattens. Negative Werte erlaubt
Unschärfe	Optional. Unschärfeabstand
Spreizung	optional. Die Größe des Schattens
Farbe	ist optional. Die Farbe des Schattens.
Einsatz	optional. Ändern Sie den Schatten vom äußeren Schatten in den inneren Schatten (am Anfang)

Teilen von Lernvideos: CSS-Video-Tutorial

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