CSS 背景與邊框：從基礎到高級應用
- 1. CSS 背景樣式
- 1.1 背景顏色
- 示例代碼：設置背景顏色
- 1.2 背景圖像
- 示例代碼：設置背景圖像
- 1.3 控制背景平鋪行為
- 示例代碼：控制背景平鋪
- 1.4 調整背景圖像大小
- 示例代碼：調整背景圖像大小
- 1.5 背景圖像定位
- 示例代碼：背景圖像定位
- 1.6 漸變背景
- 示例代碼：漸變背景
- 1.7 多個背景圖像
- 示例代碼：多個背景圖像
- 1.8 背景附加
- 示例代碼：背景附加
- 1.9 使用 `background` 簡寫屬性
- 示例代碼：簡寫背景屬性
- 2. CSS 邊框樣式
- 2.1 基本邊框
- 示例代碼：基本邊框
- 2.2 單邊邊框
- 示例代碼：單邊邊框
- 2.3 圓角邊框
- 示例代碼：圓角邊框
- 2.4 不同圓角半徑
- 示例代碼：不同圓角半徑
- 3. 總結
- 完整示例代碼
在網頁設計中，背景和邊框是樣式設計的重要組成部分。CSS 提供了豐富的屬性和方法來控制背景和邊框的樣式，從簡單的顏色填充到復雜的漸變和圓角效果。本文將詳細介紹如何使用 CSS 背景和邊框屬性，并通過示例代碼幫助你掌握這些技巧。
1. CSS 背景樣式
CSS 的 background 屬性是一個簡寫屬性，用于設置元素的背景樣式。它可以同時設置背景顏色、背景圖像、背景位置、背景大小等多個屬性。
1.1 背景顏色
background-color 屬性用于設置元素的背景顏色。它可以接受任何有效的顏色值。
示例代碼：設置背景顏色
.box {background-color: #567895;padding: 20px;color: white;
}
在這個例子中，.box 元素的背景顏色被設置為 #567895。
1.2 背景圖像
background-image 屬性用于在元素的背景中顯示圖像。你可以使用 URL 指定圖像路徑。
示例代碼：設置背景圖像
.box {background-image: url('image.png');background-repeat: no-repeat;background-position: center;background-size: cover;
}
在這個例子中，.box 元素的背景圖像被設置為 image.png，并且圖像居中顯示，不重復，且覆蓋整個元素。
1.3 控制背景平鋪行為
background-repeat 屬性用于控制背景圖像的平鋪行為。常見的值包括 no-repeat、repeat-x、repeat-y 和 repeat。
示例代碼：控制背景平鋪
.box {background-image: url('star.png');background-repeat: no-repeat;
}
在這個例子中，背景圖像 star.png 不會平鋪，只顯示一次。
1.4 調整背景圖像大小
background-size 屬性用于調整背景圖像的大小。常見的值包括 cover、contain 和具體的長度或百分比值。
示例代碼：調整背景圖像大小
.box {background-image: url('balloons.jpg');background-size: cover;
}
在這個例子中，背景圖像 balloons.jpg 會縮放以覆蓋整個元素。
1.5 背景圖像定位
background-position 屬性用于控制背景圖像在元素中的位置。你可以使用關鍵字（如 top、center）或具體的長度和百分比值。
示例代碼：背景圖像定位
.box {background-image: url('star.png');background-position: top right;
}
在這個例子中，背景圖像 star.png 會定位在元素的右上角。
1.6 漸變背景
漸變背景可以使用 linear-gradient 或 radial-gradient 函數來創建。
示例代碼：漸變背景
.box {background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96%);
}
在這個例子中，.box 元素的背景是一個線性漸變。
1.7 多個背景圖像
你可以為元素設置多個背景圖像，它們會按照指定的順序疊加顯示。
示例代碼：多個背景圖像
.box {background-image: url('star.png'), url('big-star.png');background-repeat: no-repeat, repeat;background-position: center, top right;
}
在這個例子中，.box 元素有兩個背景圖像，分別位于中心位置和右上角。
1.8 背景附加
background-attachment 屬性用于控制背景圖像的滾動行為。常見的值包括 scroll、fixed 和 local。
示例代碼：背景附加
.box {background-image: url('image.png');background-attachment: fixed;
}
在這個例子中，背景圖像 image.png 會固定在視口中，不會隨頁面滾動。
1.9 使用 background 簡寫屬性
background 屬性可以簡寫多個背景屬性。
示例代碼：簡寫背景屬性
.box {background: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96%) center center / 400px 200px no-repeat, url('big-star.png') center no-repeat, rebeccapurple;
}
在這個例子中，.box 元素的背景包括一個線性漸變、一個圖像和一個顏色。
2. CSS 邊框樣式
CSS 提供了多種方式來設置元素的邊框樣式，包括邊框顏色、寬度、樣式和圓角。
2.1 基本邊框
border 屬性用于設置元素的邊框樣式。
示例代碼：基本邊框
.box {border: 1px solid black;
}
在這個例子中，.box 元素的邊框為 1px 寬的黑色實線。
2.2 單邊邊框
你可以為元素的某一邊設置邊框。
示例代碼：單邊邊框
.box {border-top: 2px dotted rebeccapurple;
}
在這個例子中，.box 元素的上邊框為 2px 寬的紫色虛線。
2.3 圓角邊框
border-radius 屬性用于設置元素的圓角。
示例代碼：圓角邊框
.box {border-radius: 10px;
}
在這個例子中，.box 元素的四個角都有 10px 的圓角。
2.4 不同圓角半徑
你可以為每個角設置不同的圓角半徑。
示例代碼：不同圓角半徑
.box {border-top-right-radius: 1em 10%;
}
在這個例子中，.box 元素的右上角圓角半徑為 1em（水平）和 10%（垂直）。
3. 總結
本文詳細介紹了如何使用 CSS 背景和邊框屬性來美化網頁元素。通過示例代碼，你可以更好地理解這些屬性的用法。掌握這些技巧后，你可以創建出更加豐富和多樣化的網頁設計。
完整示例代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景與邊框示例</title><style>.box {width: 500px;height: 300px;padding: 20px;margin: 20px;background-color: #567895;background-image: url('star.png'), url('big-star.png');background-repeat: no-repeat, repeat;background-position: center, top right;border: 5px solid #0b385f;border-radius: 10px;border-top-right-radius: 1em 10%;color: white;}</style>
</head>
<body><div class="box"><h2>背景與邊框示例</h2><p>這是一個帶有背景圖像和圓角邊框的盒子。</p></div>
</body>
</html>
通過本文的學習，你應該能夠熟練使用 CSS 背景和邊框屬性來創建美觀的網頁設計
 -＞ 兼容JS的類Web開發(二))
——WordCount)
