設定容器的樣式
進階回應式混搭包括可套用樣式主題的容器。您可以透過混搭樣式主題或直接在「樣式內容」面板上套用樣式。依預設，系統會使用混搭樣式主題來設定容器的樣式，不過您也可以使用樣式定義。「內容」面板上的 UseTheme 內容可控制容器的主題模式。
欲顯示容器的樣式主題內容，請執行下列操作：
1. 從「檔案總管」面板中選取容器。
◦ 或者，按一下容器內的空白區域。
2. 按一下「樣式內容」面板。
3. 展開「基礎」狀態。樣式內容會列在 flexcontainer 元素下。
您可以從樣式主題的樣式設定轉換為樣式定義。欲使用樣式定義，請執行下列操作：
1. 選取容器。
2. 在「內容」面板上，清除 UseTheme 核取方塊。
3. 按一下「樣式內容」面板。
現在會顯示容器的樣式定義，而不是樣式內容。
樣式內容
您可以指定下列樣式內容。
|
內容
|
描述
|
|---|---|
|
background
|
容器的背景顏色。
|
|
border-color
|
邊界線的顏色。
|
|
border-radius
|
邊界轉角的半徑。此內容適用於容器的所有四個轉角。
|
|
border-style
|
邊界線的樣式。您可以將其設定為 Dotted、Dashed、Solid、Double、Groove、Ridge、Inset、Outset、Inherit 或 None。
|
|
border-width
|
邊界線的寬度。
|
自訂容器樣式內容
下表列出了 flexcontainer 元素的樣式內容值，並將其與樣式容器的自訂值進行了比較。
|
樣式/內容
|
預設值
|
樣式
|
|---|---|---|
|
內容
|
• background - #ffffff
• border-color - inherit
• border-radius - None
• border-style - None
• border-width - None
|
• background - #cccccc
• border-color - #AAE09F
• border-radius - 4px
• border-style - Solid
• border-width - 4px
|
|
預覽
|
 |
 |
 |
預設樣式內容值是從混搭樣式主題衍生而來。
|