Articles
Wprowadzenie do CSS
Właściwości CSS związane z dekoracją modelu pudełkowego

Właściwości CSS związane z dekoracją modelu pudełkowego

Ten artykuł wyjaśnia właściwości CSS związane z dekoracją modelu pudełkowego.

Możesz nauczyć się, jak określać właściwości, takie jak obramowania i cienie.

YouTube Video

HTML do podglądu

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>

Dekoracja

Właściwość border 

 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}

Właściwość border jest używana w CSS do ustawiania ramki elementu. border składa się z trzech elementów: szerokości, stylu i koloru, które są łączone w celu ustawienia ramki elementu.

Podstawowa struktura 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;

  • Użyj border-width, aby określić grubość obramowania. Jednostki są określane w px, em, % itp.

  • Określ typ obramowania za pomocą border-style. Możesz określić następujące wartości.

    • Wartości stylu:
      • none (brak obramowania)
      • solid (linia ciągła)
      • dotted (Linia kropkowana)
      • dashed (Linia przerywana)
      • double (Podwójna linia)
      • groove (linia żłobkowana)
      • ridge (linia wypukła)
      • inset (linia z efektem wklęsłego cienia)
      • outset (linia z efektem wypukłego cienia)

Określ kolor obramowania za pomocą border-color. Kolor można określić za pomocą nazw kolorów, rgb(), rgba(), hex itp.

Indywidualne ustawienia dla każdej strony 

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}

Możesz ustawić różne style dla każdej strony w ten sposób.

Indywidualne ustawienia dla szerokości, stylu i koloru 

 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}

Możesz również określić każdy aspekt osobno, używając border-width, border-style i border-color.

Łączenie z border-radius 

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

Używając właściwości border-radius, możesz zaokrąglić rogi obramowania.

Właściwość 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}

Właściwość border-radius służy do zaokrąglania rogów elementu. Możesz płynnie zaokrąglić cztery rogi elementu HTML, przekształcając prostokąty lub kwadraty w zaokrąglony projekt.

Wyjaśnienie:

  • Klasa border-radius-all-rounded zaokrągla wszystkie rogi o 20 pikseli, tworząc płynnie zaokrąglone pole.
  • Klasa border-radius-top-left-rounded zaokrągla tylko górny lewy róg o 20 pikseli, pozostawiając pozostałe rogi kwadratowe.
  • Klasa border-radius-ellipse-corners tworzy eliptyczne rogi, tworząc pole o poziomo rozciągniętym, zaokrąglonym kształcie.

Format właściwości 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;
  • Wartość właściwości border-radius zazwyczaj określa się w pikselach lub procentach. Możesz również ustawić od 1 do 4 wartości.
    • Określenie jednej wartości sprawia, że wszystkie rogi są jednolicie zaokrąglone.
    • Określenie dwóch wartości stosuje pierwszą wartość do górnego lewego i dolnego prawego rogu, a drugą wartość do górnego prawego i dolnego lewego rogu.
    • Określając cztery wartości, możesz ustawić różne promienie dla każdego rogu. Wartości są stosowane zgodnie z ruchem wskazówek zegara, zaczynając od górnego lewego rogu.
  • Możesz również określić indywidualnie, używając na przykład border-top-left-radius.
1border-radius: 50px / 25px;
  • Właściwość border-radius może również określać promienie pionowe i poziome oddzielnie, aby rogi były eliptyczne. W takim przypadku oddziel wartości za pomocą /.
    • Na przykład, określenie 50px / 25px ustawia promień poziomy na 50 pikseli, a promień pionowy na 25 pikseli.

Podsumowanie

  • border-radius to właściwość służąca do zaokrąglania rogów elementu.
  • Możesz określić stopień zaokrąglenia rogów w pikselach lub procentach, zastosować go do wszystkich rogów, wybranych rogów lub nadać im kształt eliptyczny.
  • Jest przydatny do elastycznych projektów i dostosowywania interfejsów użytkownika.

Właściwość outline 

 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}

Właściwość outline to właściwość CSS służąca do ustawienia linii rysowanej wokół elementu.

outline jest podobne do border, ale różni się w następujących aspektach:.

  • outline nie wpływa na model pudełka elementu, więc nie ma wpływu na układ elementu.
  • Ponieważ outline jest rysowany na zewnątrz elementu, pojawia się poza border.
  • border jest rysowany wewnątrz elementu, więc może wpływać na jego rozmiar i układ.

W tym przykładzie właściwość outline jest ustawiona w następujący sposób:.

  • Klasa outline-solid ustawia jednolitą czerwoną linię o grubości 2px.
  • Klasa outline-dashed ustawia niebieską linię przerywaną o grubości 3px.
  • Klasa outline-double ustawia zieloną podwójną linię o grubości 4px.
  • Klasa outline-offset ustawia odstęp 10px między outline a elementem.

Podstawowa składnia 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width określa grubość outline.
  • Możesz określić konkretne wartości, takie jak thin, medium, thick, lub w jednostkach takich jak px, em.
outline-style
  • outline-style określa styl outline.
  • Możesz określić style, takie jak solid, dotted, dashed, double, groove, ridge, inset, outset, none itp.
outline-color
  • outline-color określa kolor outline.
  • Możesz określić dowolny kolor, używając nazw, HEX, RGB itp.
outline-offset
  • outline-offset określa odległość między outline a elementem.
  • Możesz określić dokładne wartości w jednostkach, takich jak px, em itp.

Właściwość box-shadow 

 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}

Właściwość box-shadow służy do dodawania cieni do elementów. Używając tej właściwości, możesz tworzyć cienie wokół elementów, aby nadać im poczucie trójwymiarowości i głębi.

Wyjaśnienie:

  • W klasie box-shadow-basic-shadow rozmyty czarny cień jest wyświetlany w prawym dolnym rogu elementu.

  • W klasie box-shadow-inset-shadow rozmyty cień jest wyświetlany wewnątrz elementu. Dzięki cieniowi wchodzącemu do środka można osiągnąć wygląd wklęsły.

  • W klasie box-shadow-multiple-shadow do elementu dodawane są dwa cienie: czarny i czerwony. Ponieważ są wyświetlane w różnych pozycjach, uzyskuje się efekt trójwymiarowy.

Format właściwości box-shadow 

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];
Znaczenie poszczególnych wartości

Pierwsza wartość horizontal offset to poziome przesunięcie, określające położenie cienia względem lewej strony elementu. Podanie wartości dodatniej umieszcza cień po prawej stronie, a ujemnej po lewej.

Druga wartość vertical offset to pionowe przesunięcie, określające położenie cienia względem górnej strony elementu. Podanie wartości dodatniej umieszcza cień poniżej, a ujemnej powyżej.

Trzecia wartość blur radius wskazuje ilość rozmycia, określając stopień rozmycia cienia. Im większa wartość, tym bardziej cień się rozprasza, co powoduje bardziej rozmyty cień. Podanie wartości dodatniej umieszcza cień poniżej, a ujemnej powyżej. Ta wartość jest opcjonalna, a domyślnie wynosi 0, co oznacza brak rozmycia cienia.

Czwarta wartość spread radius określa zakres rozproszenia, definiując, jak bardzo cień się rozszerza. Podanie wartości dodatniej powiększa cień, a ujemnej pomniejsza. Ta wartość również jest opcjonalna.

Piąta wartość color określa kolor cienia. Kolory można definiować za pomocą nazw kolorów, RGB, HEX, HSL i innych modeli kolorów dostępnych w CSS. Jeśli zostanie pominięty, zastosowany zostanie domyślny kolor tekstu elementu (wartość właściwości color).

Można również najpierw określić słowo kluczowe inset. Określenie słowa kluczowego inset powoduje, że cień jest rysowany wewnątrz elementu zamiast na zewnątrz. Można również ustawić wiele cieni, oddzielając je przecinkami.

Przykład box-shadow

Przykład podstawowego cienia 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • Poziome przesunięcie wynosi 10px, co tworzy cień przesunięty o 10 pikseli w prawo.
  • Pionowe przesunięcie wynosi 10px, co tworzy cień przesunięty o 10 pikseli w dół.
  • Promień rozmycia wynosi 5px, co powoduje rozmycie cienia o 5 pikseli.
  • Kolor to rgba(0, 0, 0, 0.5), co skutkuje półprzezroczystym czarnym.
Przykład cienia wewnętrznego 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • Użycie inset rysuje cień wewnątrz elementu.
Przykład wielu cieni 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • Możesz także ustawić wiele cieni oddzielonych przecinkami. W tym przykładzie zastosowano dwa cienie: czarny cień i czerwony cień.

Podsumowanie

  • box-shadow to właściwość używana do dodawania cieni elementom w celu stworzenia wrażenia głębi.
  • Łącząc poziome i pionowe przesunięcia, rozmycie, promień rozprzestrzeniania i kolor, można uzyskać różnorodne efekty.
  • Możesz rysować cienie wewnątrz za pomocą inset, a także ustawić wiele cieni jednocześnie.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z tłemWłaściwości CSS związane z listami