Sifat CSS yang berkaitan dengan hiasan model kotak

Articles

Artikel ini menerangkan sifat CSS yang berkaitan dengan hiasan model kotak.

Anda boleh belajar cara menulis sifat seperti sempadan dan bayang-bayang.

YouTube Video

HTML untuk Pratonton

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>

Hiasan

Sifat `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}

Sifat border digunakan dalam CSS untuk menetapkan bingkai elemen. border terdiri daripada tiga elemen: lebar, gaya, dan warna, yang digabungkan untuk menetapkan bingkai elemen.

Struktur Asas `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;

Gunakan border-width untuk menentukan ketebalan sempadan. Unit ditentukan dalam px, em, %, dan sebagainya.
Tentukan jenis sempadan dengan border-style. Anda boleh menentukan nilai berikut.
- Nilai Gaya:
  - none (tiada sempadan)
  - solid (garisan pepejal)
  - berbintik (garisan berbintik)
  - bergaris putus (garisan putus-putus)
  - double (garisan dua)
  - groove (garisan beralur)
  - ridge (garisan berbingkai)
  - inset (garisan bayang masuk)
  - outset (garisan bayang keluar)

Tentukan warna sempadan dengan border-color. Warna boleh ditentukan menggunakan nama warna, rgb(), rgba(), hex, dan sebagainya.

Tetapan Individu untuk Setiap Sisi

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}

Anda juga boleh menetapkan gaya berbeza untuk setiap sisi seperti ini.

Tetapan Individu untuk Lebar, Gaya, dan Warna

 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}

Anda juga boleh menentukan setiap aspek secara berasingan menggunakan border-width, border-style, dan border-color.

Menggabungkan dengan `border-radius`

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

Dengan menggunakan sifat border-radius, anda boleh membundarkan sudut sempadan.

Sifat `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}

Sifat border-radius digunakan untuk membundarkan sudut elemen. Anda boleh melengkung dengan halus keempat-empat sudut elemen HTML, mengubah segi empat tepat atau segi empat sama menjadi reka bentuk bulat.

Penjelasan:

Kelas border-radius-all-rounded membuat semua sudut bulat dengan 20 piksel, menghasilkan kotak yang licin dan bulat.
Kelas border-radius-top-left-rounded hanya membulatkan sudut kiri atas dengan 20 piksel, mengekalkan sudut lain bersudut tepat.
Kelas border-radius-ellipse-corners mencipta sudut eliptikal, menghasilkan kotak dengan bentuk bulat yang diregangkan secara mendatar.

Format sifat `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;

Nilai untuk sifat border-radius biasanya ditentukan dalam piksel atau peratusan. Anda juga boleh menetapkan antara 1 hingga 4 nilai.
- Menentukan satu nilai menjadikan semua sudut bulat secara seragam.
- Menentukan dua nilai menetapkan nilai pertama pada sudut kiri atas dan kanan bawah, dan nilai kedua pada sudut kanan atas dan kiri bawah.
- Dengan menentukan empat nilai, anda boleh menetapkan jejari berbeza untuk setiap sudut. Nilai diterapkan mengikut arah jam dari sudut kiri atas.
Anda juga boleh menetapkannya secara individu seperti border-top-left-radius.

1border-radius: 50px / 25px;

Sifat border-radius juga boleh menentukan jejari vertikal dan horizontal secara individu untuk membentuk sudut eliptikal. Dalam kes ini, asingkan dengan /.
- Sebagai contoh, menentukan 50px / 25px menjadikan jejari horizontal 50 piksel dan jejari vertikal 25 piksel.

Ringkasan

border-radius adalah sifat untuk membundarkan sudut elemen.
Anda boleh menentukan kegebuan pada sudut dalam piksel atau peratusan, menerapkannya pada semua sudut, sudut tertentu, atau menjadikannya elips.
Ia berguna untuk reka bentuk fleksibel dan menyesuaikan antara muka pengguna.

Sifat `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}

Sifat outline adalah sifat CSS untuk menetapkan garis yang dilukis di sekitar elemen.

outline serupa dengan border, tetapi berbeza dalam perkara berikut:.

outline tidak mempengaruhi model kotak elemen, jadi ia tidak memberi kesan kepada susun atur elemen.
Oleh kerana outline dilukis di luar elemen, ia kelihatan di luar border.
border dilukis di dalam elemen, jadi ia boleh mempengaruhi saiz dan susun atur elemen.

Dalam contoh ini, sifat outline ditetapkan seperti berikut:.

Kelas outline-solid menetapkan outline merah solid dengan ketebalan 2px.
Kelas outline-dashed menetapkan outline biru putus-putus dengan ketebalan 3px.
Kelas outline-double menetapkan outline berganda hijau dengan ketebalan 4px.
Kelas outline-offset menetapkan jarak 10px antara outline dan elemen.

Sintaks Asas

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width menentukan ketebalan outline.
Anda boleh menentukan nilai seperti thin, medium, thick, atau dalam unit seperti px, em.

`outline-style`

outline-style menentukan gaya outline.
Anda boleh menentukan gaya seperti solid, dotted, dashed, double, groove, ridge, inset, outset, none, dsb.

`outline-color`

outline-color menentukan warna outline.
Anda boleh menentukan sebarang warna menggunakan nama, HEX, RGB, dsb.

`outline-offset`

outline-offset menentukan jarak antara outline dan elemen.
Anda boleh menentukan nilai tepat dalam unit seperti px, em, dsb.

Sifat `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}

Sifat box-shadow digunakan untuk menambah bayangan pada elemen. Dengan menggunakan sifat ini, anda boleh mencipta bayang-bayang di sekitar elemen untuk meluahkan rasa dimensi dan kedalaman.

Penjelasan:

Dalam kelas box-shadow-basic-shadow, bayang hitam kabur dipaparkan di bahagian bawah kanan elemen.
Dalam kelas box-shadow-inset-shadow, bayang kabur dipaparkan di dalam elemen. Dengan bayang memasuki ke dalam, anda boleh mencapai reka bentuk yang tenggelam.
Dalam kelas box-shadow-multiple-shadow, dua bayang, hitam dan merah, dikenakan pada elemen. Oleh kerana ia dipaparkan di kedudukan yang berbeza, kesan tiga dimensi dapat dicapai.

Format Sifat `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];

Makna setiap nilai

Yang pertama horizontal offset ialah nilai bagi ofset melintang, menetapkan posisi bayang dari bahagian kiri elemen. Menentukan nilai positif meletakkan bayang ke kanan, dan nilai negatif meletakkannya ke kiri.

Yang kedua vertical offset ialah nilai bagi ofset menegak, menetapkan posisi bayang dari bahagian atas elemen. Menentukan nilai positif meletakkan bayang di bawah, dan nilai negatif meletakkannya di atas.

Blur radius yang ketiga ialah nilai untuk tahap kekaburan, menetapkan kekaburan bayang. Semakin besar nilainya, semakin meluas bayang, menghasilkan bayang yang lebih kabur. Menentukan nilai positif meletakkan bayang di bawah, dan nilai negatif meletakkannya di atas. Ini adalah pilihan, dan nilai lalainya ialah 0, bermaksud tiada kekaburan pada bayang.

Spread radius yang keempat ialah nilai julat penyebaran, menetapkan sejauh mana bayang menyebar. Menentukan nilai positif akan membuat bayang menjadi lebih besar, manakala nilai negatif akan menyusutkannya. Nilai ini juga adalah pilihan.

Color yang kelima ialah nilai warna, menetapkan warna bayang. Warna boleh ditetapkan menggunakan nama warna, RGB, HEX, HSL, dan model warna lain yang tersedia dalam CSS. Jika tidak ditentukan, warna teks lalai elemen (nilai sifat color) akan digunakan.

Anda juga boleh menentukan kata kunci inset terlebih dahulu. Menentukan kata kunci inset melukis bayang di dalam elemen, bukan di luarnya. Ia juga boleh menetapkan pelbagai bayang yang dipisahkan oleh koma.

Contoh `box-shadow`

Contoh bayangan asas

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

Anjakan mendatar adalah 10px, menghasilkan bayangan 10 piksel ke kanan.
Anjakan menegak adalah 10px, menghasilkan bayangan 10 piksel ke bawah.
Radius kabur adalah 5px, menghasilkan bayangan kabur sebanyak 5 piksel.
Warna adalah rgba(0, 0, 0, 0.5), menghasilkan warna hitam semi-telus.

Contoh bayangan dalam

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Menggunakan inset menarik bayangan ke dalam elemen.

Contoh bayangan berbilang

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Anda juga boleh menetapkan bayangan berbilang yang dipisahkan dengan koma. Dalam contoh ini, dua bayangan digunakan: satu bayangan hitam dan satu bayangan merah.

Ringkasan

box-shadow adalah sifat yang digunakan untuk menambah bayangan pada elemen untuk mencipta rasa kedalaman.
Dengan menggabungkan anjakan mendatar dan menegak, kabur, radius sebaran, dan warna, pelbagai kesan boleh dicapai.
Anda boleh melukis bayangan ke dalam dengan inset, dan anda juga boleh menetapkan bayangan berbilang sekali gus.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Ciri-ciri CSS berkaitan dengan latar belakang Sifat berkaitan senarai CSS

Sifat CSS yang berkaitan dengan hiasan model kotak

YouTube Video

HTML untuk Pratonton

Hiasan

Sifat border

Struktur Asas border

Tetapan Individu untuk Setiap Sisi

Tetapan Individu untuk Lebar, Gaya, dan Warna

Menggabungkan dengan border-radius

Sifat border-radius

Penjelasan:

Format sifat border-radius

Ringkasan

Sifat outline

Sintaks Asas

outline-width

outline-style

outline-color

outline-offset

Sifat box-shadow

Penjelasan:

Format Sifat box-shadow

Makna setiap nilai

Contoh box-shadow

Contoh bayangan asas

Contoh bayangan dalam

Contoh bayangan berbilang

Ringkasan

YouTube Video

Sifat `border`

Struktur Asas `border`

Menggabungkan dengan `border-radius`

Sifat `border-radius`

Format sifat `border-radius`

Sifat `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Sifat `box-shadow`

Format Sifat `box-shadow`

Contoh `box-shadow`