Einführung in die Implementierungsmethode von Border Shadow (Box-Shadow) in CSS (Codebeispiel)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-11-09 10:37:14

Original

4238 Leute haben es durchsucht

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
  }

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
  }

Nach dem Login kopieren

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!