如何使用 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