如何使用 Divi 的新選項創建漂亮的圖像邊框

在今天的 Divi 教程中，我們將向您展示如何在您構建的下一個網站上創建漂亮的圖像邊框。 這篇文章的目的是展示如何創建與您正在使用的圖像（以及您網站的其餘部分）相匹配的精美結果。

使用新的 Divi 選項，獲得驚人的結果比以往任何時候都容易。 您只需要進行一些修改，我們將向您展示如何進行修改，您就可以將您的網頁設計提升到一個新的水平。 我們將與您分享的所有 8 個示例都將使用 Divi Builder 和 Image Module 提供的內置選項。

搶先看

讓我們來看看您可以從這篇文章中得到的結果：

如何使用 Divi 的新選項創建漂亮的圖像邊框

訂閱我們的 YouTube 頻道

漸變背景

獲得漂亮圖像邊框的第一種可能性是僅使用漸變背景。 通過嘗試各種漸變背景設置，您可以獲得簡單而優雅的結果。 我們將向您展示三個僅由漸變背景組成的圖像邊框示例。

標準

我們將要處理的第一個例子是所有例子中最簡單和最謙虛的。 標準的漸變圖像邊框。 我們將向您展示 create 的結果如下所示：

內容標籤

首先在“內容”選項卡中選擇漸變背景。 對於此示例，我們使用了以下設置：

• 第一種顏色：#081e8c
• 第二種顏色：#764f9b
• 漸變類型：線性
• 梯度方向：269度
• 起始位置：40%
• 結束位置：60%

設計選項卡

您需要做的下一件也是最後一件事情是向圖像添加一些填充。 就這麼簡單。 轉到“設計”選項卡並將“10px”添加到頂部、底部、右側和左側填充。

邊

接下來，我們有一個僅顯示在圖像左側和右側的圖像邊框。 使用這種圖像邊框可以為圖像提供更好的額外觸感，而不會過多地關注邊框本身。

內容標籤

要實現這種類型的圖像邊框，請首先向圖像添加以下漸變背景：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：#0a8da8
• 漸變類型：線性
• 漸變方向：166度
• 起始位置：29%
• 結束位置：52%

設計選項卡

在“設計”選項卡中，您唯一需要的是右側和左側的“10px”填充。

一角

繼續，您還可以為網站上的圖像創建角落背景。 當您想強調圖像中正在使用的顏色時，這種類型的邊框非常有用。

內容標籤

對於第三個圖像示例，使用以下漸變背景：

• 第一種顏色：rgba(58,8,1,0.58)
• 第二種顏色：rgba(41,196,169,0)
• 梯度方向：152deg
• 起始位置：34%
• 結束位置：28%

設計選項卡

然後，將“20px”添加到每個內邊距。

圖像邊框和漸變背景

另一種可能性是將漸變背景與圖像邊框相結合。 這也可以提供驚人的結果，您將在接下來的四個示例中看到。

微妙的漸變

漸變背景和圖像邊框的第一個組合簡單而美觀。 通過對漸變背景和邊框使用相同的顏色，圖像邊框以某種方式感覺像是被顏色填滿了。

內容標籤

首先將以下漸變背景設置添加到您的圖像：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：#777777
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：65%
• 結束位置：78%

設計選項卡

轉到“設計”選項卡並使用“邊框”子類別中的以下設置：

• 使用邊框：是
• 邊框顏色：#777777
• 邊框寬度：3px
• 邊框樣式：純色

最後，向所有填充選項添加“7px”填充。

成形

接下來，我們有一個很好的例子來吸引訪問者的注意力。 在這種情況下，圖像本身包含大部分較淺的顏色，這與較暗的邊框形成了很好的平衡。

內容標籤

此圖像邊框所需的漸變背景設置如下：

• 第一種顏色：rgba(53,0,188,0.1)
• 第二種顏色：#680061
• 漸變類型：徑向
• 徑向：中心
• 起始位置：80%
• 結束位置：80%

設計選項卡

轉到“設計”選項卡並使用以下邊框：

• 使用邊框：是
• 邊框顏色：#9a00bc
• 邊框寬度：1px
• 邊框樣式：純色

向下滾動並向圖像添加以下填充：

• 頂部：7px
• 右：5px
• 底部：7px
• 左：5px

雙邊框

將雙邊框與漸變背景結合使用也可以提供一些令人驚嘆的效果。 看一看：

內容標籤

我們在這個例子中使用的漸變背景顏色如下：

• 第一種顏色：rgba(224,43,32,0.61)
• 第二種顏色：rgba(12,113,195,0.87)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：71%
• 結束位置：93%

設計選項卡

繼續，對 Border 子類別使用以下設置：

• 使用邊框：是
• 邊框顏色：#f4f4f4（與您的部分背景顏色匹配）
• 邊框寬度：8px
• 邊框樣式：雙

並將“10px”添加到圖像的頂部、底部、右側和左側填充。

三角角

繼續，您還可以通過將漸變背景選項與虛線邊框結合使用，在邊框中創建一些小角。

內容標籤

要實現我們在上面向您展示的圖像邊框，請使用以下漸變背景設置：

• 第一種顏色：rgba(163,103,6,0)
• 第二種顏色：#e09900
• 漸變類型：徑向
• 徑向：中心
• 起始位置：97%
• 結束位置：97%

設計選項卡

在“設計”選項卡中，我們還需要進行以下邊框設置：

• 使用邊框：是
• 邊框顏色：#e09900
• 邊框寬度：2px
• 邊框樣式：虛線

最後，我們需要為頂部、底部、左側和右側填充設置一個 '8px' 的填充。

圖案和漸變背景

我們要放在聚光燈下的最後一種可能性是同時使用圖案和漸變背景。 這使您可以隨意調整圖像的外觀和感覺。

俏皮

此邊框包含兩種顏色的漸變背景，它們也用於圖像本身。 通過添加背景圖案，圖像為您的網站增添了更多氣氛。

內容標籤

對於最後一個示例，我們將使用以下漸變背景設置：

• 第一種顏色：rgba(4,49,96,0.51)
• 第二種顏色：rgba(119,74,15,0.51)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：0%
• 結束位置：100%

設計選項卡

接下來，我們還要添加圖案背景。 我們在這個例子中使用的模式來自 Toptal。 您可以將他們的模式用於各種目的，只需確保您在他們的常見問題解答中提到的代碼中註明他們。 添加圖案背景後，還要使用以下設置：

• 背景圖片尺寸：封面
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：相乘

您需要做的最後一件事是向圖像的頂部、底部、右側和左側填充添加“12px”的填充。

最後的想法

在這篇文章中，我們向您展示了一些創建漂亮圖像邊框的不同方法。 這些選項讓您了解可以在不使用任何其他 CSS 的情況下使用新的 Divi 選項執行的操作。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 Mr Aesthetics / shutterstock.com