Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit der Dekoration des Box-Modells

CSS-Eigenschaften im Zusammenhang mit der Dekoration des Box-Modells

Dieser Artikel erklärt die CSS-Eigenschaften im Zusammenhang mit der Dekoration des Box-Modells.

Sie können lernen, wie Sie Eigenschaften wie Rahmen und Schatten schreiben.

YouTube Video

HTML zur Vorschau

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Dekoration

border-Eigenschaft 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

Die border-Eigenschaft wird in CSS verwendet, um den Rahmen eines Elements festzulegen. border besteht aus drei Elementen: Breite, Stil und Farbe, und sie werden kombiniert, um den Rahmen des Elements festzulegen.

Grundstruktur von border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • Verwenden Sie border-width, um die Dicke des Rahmens anzugeben. Einheiten werden in px, em, % usw. angegeben.

  • Geben Sie den Typ des Rahmens mit border-style an. Sie können die folgenden Werte angeben.

    • Stilwerte:
      • none (kein Rahmen)
      • solid (durchgezogene Linie)
      • gepunktet (gepunktete Linie)
      • gestrichelt (gestrichelte Linie)
      • double (doppelte Linie)
      • groove (gekerbte Linie)
      • ridge (Linie mit Erhebung)
      • inset (eingelassene Schattenlinie)
      • outset (hervorstehende Schattenlinie)

Geben Sie die Farbe des Rahmens mit border-color an. Die Farbe kann mit Farbnamen, rgb(), rgba(), hex usw. angegeben werden.

Individuelle Einstellungen für jede Seite 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Sie können auch verschiedene Stile für jede Seite wie folgt festlegen.

Individuelle Einstellungen für Breite, Stil und Farbe 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Sie können auch jeden Aspekt einzeln mit border-width, border-style und border-color angeben.

Kombination mit border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Mit der Eigenschaft border-radius können Sie die Ecken des Rahmens abrunden.

Eigenschaft border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

Die Eigenschaft border-radius wird verwendet, um die Ecken eines Elements abzurunden. Sie können die vier Ecken eines HTML-Elements sanft abrunden und Rechtecke oder Quadrate in ein abgerundetes Design verwandeln.

Erklärung:

  • Die Klasse border-radius-all-rounded macht alle Ecken mit 20 Pixeln rund und erzeugt so eine sanft abgerundete Box.
  • Die Klasse border-radius-top-left-rounded rundet nur die obere linke Ecke mit 20 Pixeln ab, während die anderen Ecken eckig bleiben.
  • Die Klasse border-radius-ellipse-corners erzeugt elliptische Ecken, wodurch eine Box mit horizontal gestreckter, abgerundeter Form entsteht.

Das Format der Eigenschaft border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • Der Wert der Eigenschaft border-radius wird normalerweise in Pixeln oder Prozent angegeben. Sie können auch 1 bis 4 Werte festlegen.
    • Wenn Sie einen Wert angeben, werden alle Ecken gleichmäßig abgerundet.
    • Wenn Sie zwei Werte angeben, wird der erste Wert auf die obere linke und untere rechte Ecke angewendet, der zweite Wert auf die obere rechte und untere linke Ecke.
    • Durch die Angabe von vier Werten können Sie für jede Ecke unterschiedliche Radien festlegen. Die Werte werden im Uhrzeigersinn von der oberen linken Ecke angewendet.
  • Sie können auch einzelne Einstellungen wie border-top-left-radius vornehmen.
1border-radius: 50px / 25px;
  • Mit der Eigenschaft border-radius können auch vertikale und horizontale Radien einzeln angegeben werden, um die Ecken elliptisch zu gestalten. In diesem Fall trennen Sie die Werte mit /.
    • Zum Beispiel macht die Angabe von 50px / 25px den horizontalen Radius zu 50 Pixeln und den vertikalen Radius zu 25 Pixeln.

Zusammenfassung

  • border-radius ist eine Eigenschaft, um die Ecken eines Elements abzurunden.
  • Sie können die Rundung der Ecken in Pixeln oder Prozentsätzen angeben, sie auf alle Ecken, bestimmte Ecken anwenden oder sie elliptisch gestalten.
  • Es ist nützlich für flexible Designs und die Anpassung von Benutzeroberflächen.

outline-Eigenschaft 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

Die outline-Eigenschaft ist eine CSS-Eigenschaft, mit der die Linie um ein Element festgelegt wird.

outline ist ähnlich wie border, unterscheidet sich jedoch in folgenden Punkten:.

  • outline beeinflusst das Boxmodell des Elements nicht und hat somit keinen Einfluss auf das Layout des Elements.
  • Da outline außerhalb des Elements gezeichnet wird, erscheint es außerhalb von border.
  • border wird innerhalb des Elements gezeichnet und kann daher die Größe und das Layout des Elements beeinflussen.

In diesem Beispiel wird die outline-Eigenschaft wie folgt gesetzt:.

  • Die outline-solid-Klasse setzt eine 2px dicke, durchgehende, rote Umrandung.
  • Die outline-dashed-Klasse setzt eine 3px dicke, blaue, gestrichelte Umrandung.
  • Die outline-double-Klasse setzt eine 4px dicke, grüne, doppellinige Umrandung.
  • Die outline-offset-Klasse setzt einen 10px-Abstand zwischen der Umrandung und dem Element.

Grundlegende Syntax 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width legt die Dicke der Umrandung fest.
  • Sie können spezifische Werte wie thin, medium, thick oder Einheiten wie px, em angeben.
outline-style
  • outline-style legt den Stil der Umrandung fest.
  • Sie können Stile wie solid, dotted, dashed, double, groove, ridge, inset, outset, none usw. angeben.
outline-color
  • outline-color legt die Farbe der Umrandung fest.
  • Sie können jede beliebige Farbe mit Namen, HEX, RGB usw. angeben.
outline-offset
  • outline-offset legt den Abstand zwischen der Umrandung und dem Element fest.
  • Sie können genaue Werte in Einheiten wie px, em usw. angeben.

box-shadow-Eigenschaft 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

Die box-shadow-Eigenschaft wird verwendet, um Schatten zu Elementen hinzuzufügen. Durch die Verwendung dieser Eigenschaft können Sie Schatten um Elemente herum erstellen, um ein Gefühl von Dimensionalität und Tiefe auszudrücken.

Erklärung:

  • In der box-shadow-basic-shadow-Klasse wird ein unscharfer schwarzer Schatten unten rechts am Element angezeigt.

  • In der box-shadow-inset-shadow-Klasse wird ein unscharfer Schatten innerhalb des Elements angezeigt. Mit dem nach innen gerichteten Schatten können Sie ein vertieftes Design erzielen.

  • In der box-shadow-multiple-shadow-Klasse werden zwei Schatten, schwarz und rot, auf das Element angewendet. Da sie an verschiedenen Positionen angezeigt werden, wird ein dreidimensionaler Effekt erzielt.

Format der box-shadow-Eigenschaft 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
Bedeutung der einzelnen Werte

Der erste horizontale Versatz ist der Wert für den horizontalen Versatz und gibt die Position des Schattens von der linken Seite des Elements an. Ein positiver Wert platziert den Schatten nach rechts, ein negativer Wert nach links.

Der zweite vertikale Versatz ist der Wert für den vertikalen Versatz und gibt die Position des Schattens von der Oberseite des Elements an. Ein positiver Wert platziert den Schatten nach unten, ein negativer Wert nach oben.

Der dritte Wert, der Weichzeichnungsradius, gibt die Stärke der Unschärfe an und bestimmt, wie verschwommen der Schatten ist. Je größer der Wert ist, desto mehr breitet sich der Schatten aus und wird dadurch unschärfer. Ein positiver Wert platziert den Schatten nach unten, ein negativer Wert nach oben. Dieser Wert ist optional; der Standardwert ist 0, was bedeutet, dass der Schatten nicht unscharf ist.

Der vierte Wert, der Ausbreitungsradius, gibt an, wie weit sich der Schatten ausdehnt. Ein positiver Wert lässt den Schatten größer werden, während ein negativer Wert ihn verkleinert. Dieser Wert ist ebenfalls optional.

Der fünfte Wert, die Farbe, gibt die Farbe des Schattens an. Farben können mit Farbnamen, RGB-, HEX-, HSL- oder anderen in CSS verfügbaren Farbmodellen festgelegt werden. Wenn dieser Wert weggelassen wird, wird die Standardtextfarbe des Elements (Wert der color-Eigenschaft) verwendet.

Sie können auch zuerst das Schlüsselwort inset angeben. Durch die Angabe des Schlüsselwortes inset wird der Schatten innerhalb des Elements gezeichnet, anstatt außen. Es ist ebenfalls möglich, mehrere Schatten durch Kommas getrennt festzulegen.

Beispiel für box-shadow

Einfaches Schattenbeispiel 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • Der horizontale Versatz beträgt 10px, wodurch ein Schatten 10 Pixel nach rechts entsteht.
  • Der vertikale Versatz beträgt 10px, wodurch ein Schatten 10 Pixel nach unten entsteht.
  • Der Weichzeichnungsradius beträgt 5px, was zu einer Schattenweichzeichnung von 5 Pixeln führt.
  • Die Farbe ist rgba(0, 0, 0, 0.5), was zu einem halbtransparenten Schwarz führt.
Beispiel für einen inneren Schatten 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • Mit inset wird der Schatten innerhalb des Elements gezeichnet.
Beispiel für mehrere Schatten 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • Sie können auch mehrere Schatten festlegen, die durch Kommas getrennt sind. In diesem Beispiel werden zwei Schatten angewendet: ein schwarzer Schatten und ein roter Schatten.

Zusammenfassung

  • box-shadow ist eine Eigenschaft, die verwendet wird, um Elementen Schatten hinzuzufügen und so ein Gefühl von Tiefe zu erzeugen.
  • Durch die Kombination von horizontalem und vertikalem Versatz, Weichzeichnung, Ausbreitungsradius und Farbe können verschiedene Effekte erzielt werden.
  • Mit inset können Sie Schatten innerhalb zeichnen, und Sie können auch mehrere Schatten gleichzeitig festlegen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Hintergrundbezogene CSS-EigenschaftenListenbezogene CSS-Eigenschaften