suchen

Heim >Web-Frontend >CSS-Tutorial >So legen Sie einen Div-Schatten in CSS fest

So legen Sie einen Div-Schatten in CSS fest

青灯夜游
青灯夜游Original
2021-05-12 13:47:0428762Durchsuche

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>

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;

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verbessern Sie die CSS-LeistungNächster Artikel：So verbessern Sie die CSS-Leistung

In Verbindung stehende Artikel

Mehr sehen