CSS 屬性概述

CSS 屬性用于控制 HTML 元素的樣式和行為，包括布局、顏色、字體、動畫等。以下是常用的 CSS 屬性分類及示例：

布局相關屬性

• display: 控制元素的顯示方式，如 block、inline、flex、grid。
• position: 定義元素的定位方式，如 static、relative、absolute、fixed。
• float: 使元素向左或向右浮動，如 left、right、none。
• margin/padding: 設置元素的外邊距和內邊距。
• width/height: 定義元素的寬度和高度。

顏色與背景屬性

• color: 設置文本顏色，如 color: #ff0000;。
• background-color: 定義背景顏色。
• background-image: 設置背景圖片，如 background-image: url('image.png');。
• background-size: 控制背景圖片大小，如 cover、contain。

字體與文本屬性

• font-family: 定義字體類型，如 font-family: Arial, sans-serif;。
• font-size: 設置字體大小，如 font-size: 16px;。
• font-weight: 控制字體粗細，如 bold、normal。
• text-align: 對齊文本，如 left、center、right。
• line-height: 設置行高。

邊框與陰影屬性

• border: 定義邊框樣式，如 border: 1px solid #000;。
• border-radius: 設置圓角邊框，如 border-radius: 5px;。
• box-shadow: 添加陰影效果，如 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);。

動畫與過渡屬性

• transition: 控制屬性變化的過渡效果，如 transition: all 0.3s ease;。
• animation: 定義動畫效果，如 animation: fade 2s infinite;。
• transform: 實現元素的變形，如 rotate、scale、translate。

響應式設計屬性

• @media: 媒體查詢，根據屏幕尺寸應用不同樣式。
• min-width/max-width: 定義響應式斷點。

代碼示例

以下是一個簡單的 CSS 示例，展示常見屬性的使用：

.box {display: flex;width: 200px;height: 200px;background-color: #f0f0f0;border: 2px solid #333;border-radius: 10px;margin: 20px;padding: 10px;box-shadow: 3px 3px 5px rgba(0,0,0,0.2);transition: all 0.3s ease;
}.box:hover {transform: scale(1.05);
}

瀏覽器兼容性

不同 CSS 屬性在不同瀏覽器中的支持程度可能有所差異。可以通過工具如 Can I use 查詢兼容性。