Wie erstelle ich einen CSS3-Randschatteneffekt? (Bilder + Videos)-CSS-Kenntnisse-php.cn

Wie erstelle ich einen CSS3-Randschatteneffekt? (Bilder + Videos)

藏色散人

Freigeben： 2018-09-27 15:20:14

Original

7163 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die detaillierte Implementierungsmethode des CSS3-Randschatteneffekts vor.

Im Webdesign verwenden wir normalerweise PS-Tools, um Effekte wie Bilder oder Randschatten und dreidimensionale Effekte zu erzielen. Wenn jedoch einige grundlegende Effekte mit P-Bildern vervollständigt werden müssen, ist dies relativ ineffizient.

Im Folgenden stellen wir Ihnen den Box-Shadow des Border-Shadow-Attributs in CSS3 vor. Mit diesem Attribut können wir den Border-Shadow-Effekt leicht erzielen.

Das CSS3-Randschatten-Codebeispiel lautet wie folgt:

1 Das Box-Shadow-Attribut implementiert den äußeren Schatten des Rahmens

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS3边框阴影</title>
   <style type="text/css">
      *{margin: 0px;padding: 0px;}
      div{margin: 20px 0px;
         width: 100%;
         height: 40px;
         background: #fff;
      box-shadow:5px 5px 10px 5px #ccc;
      }
   </style>
</head>
<body>
  <div></div>
</body>
</html>

Nach dem Login kopieren

In diesem HTML-Code fügen wir dem div ein Box-Shadow-Stilattribut hinzu und setzen die Parameter auf 5px 5px 10px 5px #ccc.

Der erste Parameter stellt die horizontale Schattenposition dar;

Der zweite Parameter stellt die vertikale Schattenposition dar;

Der vierte Parameter stellt die Größe des Schattens dar;

Der fünfte Parameter stellt die Farbe des Schattens dar.

Der sechste Parameter ist nicht festgelegt und standardmäßig auf den äußeren Schatten eingestellt .

Dann ist der endgültige Effekt des obigen Codes wie folgt:

Wie erstelle ich einen CSS3-Randschatteneffekt? (Bilder + Videos) Wie in der Abbildung gezeigt, haben wir den äußeren Schatten erfolgreich gesetzt die Grenze für dieses Div.

Hinweis

: Die Box-Shadow-Eigenschaft fügt der Box einen oder mehrere Schatten hinzu. Die Parameter im Box-Shadow-Attribut repräsentieren jeweils die horizontale Schattenposition, die vertikale Schattenposition, den Unschärfeabstand, die Schattengröße, die Schattenfarbe, den inneren und äußeren Schatten (Standard ist außen) und legen den inneren Schatten fest (Einschub). ).

2. Das Box-Shadow-Attribut implementiert Schatten innerhalb des Rahmens

Basierend auf dem obigen HTML-Code nehmen wir einige Änderungen am Wert des Box-Shadow-Stils vor Attribut:

box-shadow:5px 5px 10px 5px #ccc inset;

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie erstelle ich einen CSS3-Randschatteneffekt? (Bilder + Videos) Wie in der Abbildung gezeigt, stellen wir den inneren Schatteneffekt des Randes auf das Div ein.

3. Das Box-Shadow-Attribut erzielt einen zylindrischen Effekt

box-shadow:0px 5px 10px 10px #ccc inset;

Nach dem Login kopieren

Hier setzen wir die horizontale Schattenposition auf 0 Pixel und legen den inneren Schatten fest.
Der endgültige Effekt ist wie folgt:

Wie in der Abbildung gezeigt, zeigt das Div den zylindrischen Effekt.

Hinweis
: Im Box-Shadow-Attribut können die ersten beiden Parameter negativ sein und müssen vorhanden sein, während die folgenden Parameter optional sind. In diesem Artikel geht es um die spezifische Implementierungsmethode des
CSS3-Randschatteneffekts
. Ich hoffe, dass er für Freunde in Not hilfreich ist.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen CSS3-Randschatteneffekt? (Bilder + Videos). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!