Heim > Artikel > Web-Frontend > Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel)

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel)

不言Original: 2018-11-09 10:34:314155Durchsuche

Der in diesem Artikel geteilte Inhalt ist die Methode zur Implementierung von Border Shadow. Der Inhalt ist sehr detailliert.

Was wir brauchen, um dem Rand einen Schatten hinzuzufügen, ist das Box-Shadow-Attribut. Schauen wir uns die Syntaxformate des Box-Shadow-Attributs

box-shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung) (Schattenunschärfe) (Schattengröße) (Schattenfarbe) (Schattenrichtung); (Schattenunschärfe) (Schattengröße) (Schattenfarbe) (Schattenrichtung) kann weggelassen werden oder das folgende Format verwendet werden. (Verwandte Empfehlungen:

CSS Learning Manual
)

box-shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung);

box -shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung) (unscharfer Schatten);

box-shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung). ) (unscharfer Schatten) (Schattengröße);

box-shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung) (Schattenunschärfe) (Schattenfarbe);

box -shadow: (Abstand in horizontaler Richtung) (Abstand in vertikaler Richtung) (Schattenunschärfe) (Schattengröße) (Schattenfarbe);

box-shadow: ( Abstand in horizontaler Richtung) (vertikaler Abstand in Richtung) (Schattenunschärfe) (Schattenfarbe) (Schattenrichtung);

Syntaxbeispiel:

box-shadow：5px 5px 3px 1px＃000000 inset;

Werfen wir einen Blick auf die Codebeispiel im Detail:

SimpleShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
  <div class="SimpleFrame">php中文网</div>
  </body>
  </html>

SimpleShadow.css

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040;
}

Der Effekt ist wie folgt:

Der Schatteneffekt ist angehängt Container des DIV und zeigt den Schatten an.

Ändern Sie beim Festlegen des Grades der Schattenunschärfe den CSS-Code wie folgt.

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel) SimpleShadow.css

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 0px #808080;
  }

Der Effekt ist wie folgt:

Bei der Einstellung „box-shadow: 4px 4px 4px #808080; „

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel)

Bei der Einstellung „Box-Shadow: 4px 4px 16px #808080;“

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel) Je größer die Zahl, desto unschärfer wird der Umriss Schatten und die Anzeige weicherer Farbtöne.

Schattengröße festlegen

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel)

SimpleShadow.css

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px 10px #404040;
}

Wenn Sie die Größe des Schattens angeben, wird der Schatten angezeigt Die extern angegebene Größe wird angezeigt. Der Effekt ist wie folgt:

Einstellung der Schattenrichtung

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel) CSS-Code lautet wie folgt:

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040 inset;
}

Der Effekt ist wie folgt: Der Schatten wird innerhalb des Rahmens angezeigt

Schattenfarbe festlegen

Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel) Geben Sie die Schattenfarbe des Box-Shadow an.

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 2px 2px 10px #ff6a00;
  }

Der Effekt ist wie folgt: Der Schatten wird getönt und angezeigt.

Dieser Artikel endet hier. Weitere Informationen zu CSS finden Sie in der Spalte

CSS-Video-Tutorial Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel) auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonEinführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css

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：Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)Nächster Artikel：Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

In Verbindung stehende Artikel

Mehr sehen