Wie implementiert man Box Shadow in CSS3? Schatteneffekt in CSS3-CSS-Tutorial-php.cn

Wie implementiert man Box Shadow in CSS3? Schatteneffekt in CSS3

云罗郡主

Freigeben： 2018-11-09 14:59:50

Original

5074 Leute haben es durchsucht

Wie füge ich Schatten zu CSS-Bildern hinzu? Wie implementiert man Box Shadow in CSS3? Ich glaube, dass viele Freunde, die gerade mit CSS in Kontakt gekommen sind, solche Fragen haben werden. In diesem Kapitel lernen Sie den Schatteneffekt in CSS3 kennen und erfahren, wie Sie den Box-Schatten in CSS3 implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

CSS3 unterstützt das Hinzufügen von Schatten zu Text oder Elementen. Schattenattribute werden in die folgenden zwei Typen unterteilt:

Textschatten

Boxschatten

1: Textschatten

unterstützt CSS3, um Schatteneffekte zu Text hinzuzufügen . Hier ist ein Beispiel für das Hinzufügen eines Schatteneffekts zu einem Text:

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>
   <body>
      <h1>www.php.cn</h1>
      <h2>www.php.cn</h2>
      <h3>www.php.cn</h3>
      <h4>www.php.cn</h4>
      <h5>www.php.cn</h5>
      <h6>www.php.cn</h6>
      <p>www.php.cn</p>
   </body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt: Schatteneffekt, das Folgende ist ein Beispiel für das Hinzufügen eines Schatteneffekts zu einem Element:

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>
   <body>
      <div>这是一个带有box-shadow的div元素</div>
   </body>
</html>

Nach dem Login kopieren

Der Der Effekt ist wie folgt: Wie implementiert man Box Shadow in CSS3? Schatteneffekt in CSS3

Wie implementiert man Box Shadow in CSS3? Eine vollständige Einführung in den Schatteneffekt in CSS3. Wenn Sie mehr über das

CSS3-Tutorial

erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie implementiert man Box Shadow in CSS3? Schatteneffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!