與框模型裝飾相關的CSS屬性
本文解釋了與框模型裝飾相關的CSS屬性。
您可以學習如何編寫邊框和陰影等屬性。
YouTube Video
預覽的HTML
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>裝飾
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}border屬性在CSS中用於設置元素的框線。border由三個元素組成：寬度、樣式和顏色，這些組合用於設置元素的框線。
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;-
使用
border-width來指定邊框的厚度。單位可以使用px、em、%等進行指定。 -
使用
border-style指定邊框的類型。您可以指定以下值。- 樣式值：
none（無邊框）solid（實線）dotted（點線）dashed（虛線）double（雙實線）groove（凹槽線）ridge（凸脊線）inset（內嵌陰影線）outset（外凸陰影線）
- 樣式值：
使用border-color指定邊框的顏色。顏色可以使用顏色名稱、rgb()、rgba()、hex等進行指定。
每邊的單獨設定
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}您也可以像這樣為每邊設置不同的樣式。
寬度、樣式和顏色的單獨設定
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}您也可以分別使用 border-width、border-style 和 border-color 單獨指定每個屬性。
結合使用 border-radius
1.box-rounded {
2 border: 2px solid #000;
3 border-radius: 10px; /* Round corners by 10px */
4}使用 border-radius 屬性，您可以圓化邊框的角。
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}border-radius 屬性用於圓化元素的角。您可以平滑地圓化 HTML 元素的四個角，將矩形或正方形轉換為圓角的設計。
說明：
border-radius-all-rounded類會使所有角都圓化為 20 像素，形成一個平滑的圓角框。border-radius-top-left-rounded類僅將左上角圓化為 20 像素，其他角保持方形。border-radius-ellipse-corners類創建橢圓形角，形成一個水平方向拉伸的圓角框。
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;border-radius屬性的值通常以像素或百分比指定。此外，您可以設置 1 到 4 個值。- 指定一個值會使所有角統一圓化。
- 指定兩個值時，第一個值應用於左上角和右下角，第二個值應用於右上角和左下角。
- 通過指定四個值，您可以為每個角設置不同的半徑。這些值按順時針方向從左上角應用。
- 您還可以像
border-top-left-radius這樣單獨指定。
1border-radius: 50px / 25px;border-radius屬性還可以分別指定垂直和水平半徑，以形成橢圓形的角。在這種情況下，用/分隔。- 例如，指定
50px / 25px將使水平半徑為 50 像素，垂直半徑為 25 像素。
- 例如，指定
總結
border-radius是用於圓化元素角的屬性。- 您可以使用像素或百分比指定角的圓度，應用於所有角、特定角，或者使其成為橢圓形。
- 這對於靈活的設計和自定義用戶界面非常有用。
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}outline 屬性是用於設置環繞元素繪製的線的 CSS 屬性。
outline 與 border 相似，但在以下幾點上有所不同：。
outline不會影響元素的盒模型，因此不會影響元素的佈局。- 由於
outline是繪製在元素外部的，因此它會出現在border的外側。 border是繪製在元素內部的，因此它可能會影響元素的大小和佈局。
在此範例中，outline 屬性設置如下：。
outline-solid類設置了一個厚度為 2px 的實心紅色輪廓。outline-dashed類設置了一個厚度為 3px 的藍色虛線輪廓。outline-double類設置了一個厚度為 4px 的綠色雙線輪廓。outline-offset類設置了輪廓與元素之間的 10px 距離。
基本語法
1element {
2 outline: outline-width outline-style outline-color;
3 outline-offset: 10px;
4}outline-width
outline-width用於指定輪廓的厚度。- 您可以指定特定的值，例如
thin、medium、thick，或以px、em等單位計算。
outline-style
outline-style用於指定輪廓的樣式。- 您可以指定樣式，例如
solid、dotted、dashed、double、groove、ridge、inset、outset、none等。
outline-color
outline-color用於指定輪廓的顏色。- 您可以使用名稱、HEX、RGB 等方式指定任意顏色。
outline-offset
outline-offset用於指定輪廓與元素之間的距離。- 您可以使用
px、em等單位指定精確的值。
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}box-shadow 屬性用於給元素添加陰影。透過使用此屬性，您可以在元素周圍創建陰影，以表現出立體感和深度感。
說明：
-
在
box-shadow-basic-shadow類中，元素的右下角會顯示一個模糊的黑色陰影。 -
在
box-shadow-inset-shadow類中，元素內部會顯示一個模糊的陰影。通過陰影向內延伸，您可以實現凹陷設計。 -
在
box-shadow-multiple-shadow類中，元素會應用兩種陰影：黑色和紅色。由於它們顯示在不同的位置，因此可實現三維效果。
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];每個值的意義
第一個 horizontal offset 是水平偏移值，用於指定陰影相對於元素左側的位置。指定正值時，陰影會定位於右側，指定負值時，陰影會定位於左側。
第二個 vertical offset 是垂直偏移值，用於指定陰影相對於元素頂部的位置。指定正值時，陰影會定位於下方，指定負值時，陰影會定位於上方。
第三個 blur radius 是模糊半徑值，用於指定陰影的模糊程度。值越大，陰影擴散越多，導致陰影更加模糊。指定正值時，陰影會定位於下方，指定負值時，陰影會定位於上方。此項為可選參數，預設值為 0，表示陰影沒有模糊。
第四個 spread radius 是擴展半徑值，用於指定陰影的擴展範圍。指定正值時，陰影會變大，指定負值時，陰影會縮小。此值亦為可選參數。
第五個 color 是顏色值，用於指定陰影的顏色。顏色可以使用色彩名稱、RGB、HEX、HSL 以及 CSS 支援的其他顏色模型進行設定。如果省略，將套用元素的預設文本顏色（color 屬性的值）。
您還可以先指定 inset 關鍵字。指定 inset 關鍵字時，陰影將繪製在元素內部，而非外部。您也可以設定由逗號分隔的多個陰影。
box-shadow 的範例
基礎陰影範例
1div {
2 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}- 水平偏移為
10px，創建一個向右偏移 10 像素的陰影。 - 垂直偏移為
10px，創建一個向下偏移 10 像素的陰影。 - 模糊半徑為
5px，產生一個模糊半徑為 5 像素的陰影。 - 顏色為
rgba(0, 0, 0, 0.5)，產生一個半透明的黑色。
內部陰影範例
1div {
2 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}- 使用
inset可將陰影繪製到元素內部。
多重陰影範例
1div {
2 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}- 您也可以使用逗號分隔設置多個陰影。在此範例中應用了兩個陰影：一個黑色陰影和一個紅色陰影。
總結
box-shadow是用於為元素添加陰影以創建深度感的屬性。- 通過結合水平和垂直偏移、模糊效果、擴展半徑以及顏色，可以實現多種效果。
- 可以使用
inset繪製內部陰影，也可以一次設置多個陰影。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。