指南/樣式/邊框和陰影設定

邊框和陰影設定

許多 WordPress 編輯器的區塊包含邊框設定,可以在內容周圍新增框線。本指引會說明如何運用這些邊框設定。

開啟邊框與陰影設定

「邊框和陰影」設定可以套用至整個網站、網站上的特定元素,或套用至單一內容區塊。只有支援邊框的區塊才會出現邊框和陰影的套用選項。

一個箭頭從「區塊設定」中的「樣式」圖示指向「邊框和陰影」區段。
「圖片」區塊中,邊框和陰影設定的範例

檢視所有設定

你可以使用以下設定來調整區塊文字的外觀:

如未看到設定,請按一下「邊框和陰影」右側的三個點 (如右圖所示),然後選擇要設定的選項:

  • 邊框
  • 半徑
  • 陰影
一個箭頭從「邊框和陰影」省略符號選單指向「邊框和陰影」設定。

新增邊框

你可以使用「邊框」設定,新增區塊周圍的框線。你可以選擇邊框的粗細、顏色和半徑。

若要在區塊中新增邊框:

  1. 選取區塊,然後開啟「區塊設定」側邊欄。
  2. 找到側邊欄中的「邊框和陰影」區段。
  3. 輸入想要的值,或拖曳滑桿以繪製邊框。
  4. 選用:按一下大小欄位左側的圓圈,即可變更邊框的顏色。選取佈景主題顏色、預設顏色,或使用顏色選擇器設定自己的顏色。

邊框的值依預設會以像素為單位計算。按一下欄位旁的「px」即可變更為其他單位之一 (%、em、rem、vw 和 vh)。深入了解不同的尺寸設定單位

Video showing how to add a border to an image block.

調整邊框半徑

你可以使用「半徑」設定,讓區塊的邊框呈現圓角。將半徑設定為 0 表示區塊有銳利邊緣,而半徑為 100 表示圓角邊緣,如下所示:

具有圓角邊框的圖片區塊。
具有圓角邊框的圖片區塊

進階邊框設定

你可以使用「邊框」和「半徑」設定盡情發揮創意。使用「取消連結四邊」選項,即可設定區塊每一邊的邊框和半徑。

取消連結四邊圖示的周圍繪製了一個方框,其中工具提示寫著「取消連結四邊」。

若要設定每一邊的自訂邊框或半徑:

  1. 按一下「邊框」或「半徑」右側的「取消連結四邊」圖示。
  2. 設定每一邊的自訂尺寸。

你也可以按一下「邊框顏色和樣式選擇器」,為邊框設定不同的顏色和樣式。

邊框和半徑設定
使用自訂邊框和半徑製造獨特效果的範例。

新增陰影

某些區塊 (包括按鈕圖片多重欄位) 可使用「陰影」選項,你可以使用該選項,讓區塊後面出現陰影。

「陰影」區段開啟,一個箭頭指向不同的陰影選項。
按鈕區塊」中的按鈕套用陰影效果的範例。

為元素選擇下列其中一個陰影效果:

  • 自然
  • 深度
  • 銳利
  • 外框線
  • 清晰

自訂陰影設定

你可以自訂預設的陰影效果,或透過「樣式」編輯器建立自己的效果。

  1. 前往網站的儀表板
  2. 前往「外觀」→「編輯器」
  3. 在左側選單中選取「樣式」。
    • 你也可以在編輯器中選取右上角的「樣式」圖示,該按鈕看起來像黑白圓圈。
  4. 按一下「陰影」選項。
  5. 按一下你要自訂的陰影名稱。若要建立新的自訂陰影,請按一下「自訂」標題旁的加號圖示,然後按一下新的自訂陰影名稱。
  6. 在陰影設定中,你可以預覽陰影呈現的效果,以及下方的陰影名稱。按一下陰影名稱以調整下列設定:
    • 顏色:使用「顏色選擇器」選擇陰影的顏色。
    • 外框或內框:選取陰影出現的位置是在元素的外部或內部。
    • X 位置和 Y 位置:調整陰影應該顯示於距物件多遠的位置。
    • 模糊:陰影的失焦程度。
    • 涉及區域:陰影應呈現的大小。
  7. 完成後,按一下「儲存」按鈕,即可儲存變更。

重設邊框和陰影

你可以重設區塊邊框和陰影的自訂效果,然後從頭開始。若要重設樣式:

  1. 按一下「邊框和陰影」選項 (區段頁首右側,垂直排列的三個點)。
  2. 取消勾選個別設定以重設特定設定,或按一下「全部重設」以重設所有設定。

如果沒有顯示可重設的選項,代表沒有可移除的自訂效果。

一個箭頭從「邊框」設定圖示指向框住個別設定的方塊和「全部重設」選項。
Copied to clipboard!