在Weebly中制作CSS圆角元素

CSS 您可以使用它来自定义网站上的每个元素。借助 CSS 制作圆角元素也是一项非常简单的任务。大多数内容管理系统和网站建设者默认提供此功能。您可以使用此功能来展示您的图像、按钮和文本框，使其具有圆角。但是，Weebly 建站不提供控制元素圆角的方法。据我们检查，大多数 Weebly 主题都有非常清晰的图像和按钮元素。在本文中，我们将解释如何为Weebly建站制作 CSS 圆角元素。

什么是圆角？

如果您仍然不清楚什么是圆角，那么下面是一个显示带有尖角和圆角的图像的示例。

您可以通过使用 CSS 定义“border-radius”属性来实现圆角。好的部分是您可以将此 CSS 属性应用于任何元素，如图像、按钮、文本框等。

在 Weebly 中制作圆角图像

在 Weebly建站中，您可以将图像用作单独的元素、产品、画廊和幻灯片。不过不用担心，Weebly 中的每张图片始终由 HTML img 标签控制。您可以在 Weebly 中为 .img 类定义自定义 CSS 属性。如果您的主题没有在“main_style.css”或“style.less”的 img 类中添加“border-radius”属性，则图像不会有圆角。

为了使图像圆角，在“main_style.css”或“style.less”文件中添加以下 CSS 代码：

.img {
border-radius:10px;
}

这将使所有图像在所有四个角上都具有 10 像素的边框半径。请记住，它包括徽标、图库、产品和幻灯片中使用的图像，. 您还可以仅为某些元素上的图像排除边框半径。您可以通过仅为该元素将边框半径定义为 0 来做到这一点。例如，您可能不希望徽标具有圆角。在这种情况下，将“border-radius: opx”添加到主样式表中的“.wsite-logo img”类。下面是它的外观：

.wsite-logo img {
max-height: 70px; /* This is an existing line */
border-radius: none !important; /* This is a line to remove the rounded corner */
}

如果要控制不同角的不同半径，请使用以下代码：

img {
border-radius: 10px 8px 15px 12px;
}

这将使图像按以下顺序具有不同的边框半径——顶部（10px）、右侧（8px）、底部（15px）和左侧（12px）。

还可以控制仅在单个页面上上传的图像的边框半径。只需在

标签。您还可以将代码粘贴到站点设置的标题部分下，以在所有页面上生效，而无需修改主题的样式表。

修改按钮

与图像类似，大多数 Weebly 响应式主题都有边缘锐利的按钮，也可以使用以下 CSS 将其制成圆角：

.wsite-button, .blog-button {
border-radius:10px;
}

您可以直接在主 CSS 中修改代码，或在站点设置的标题部分下添加代码以在所有页面上生效。

有关的： 如何在 Weebly 中使用开发者平台？

添加圆角文本框

有时您可能只需要在少数几个地方添加文本框。在这种情况下，您可以将“嵌入代码”元素中的样式用作内联样式，以便代码仅影响该元素。例如，您可以在“嵌入代码”元素中使用以下代码来制作圆角文本框：

<p style="background-color:#02f3e5;
border-radius:8px;
padding:15px;
margin:5px;"><b>This is a sample text box with rounder corner using “border-radius” property with inline CSS affecting only the text box element.</b>
</p>

如下所示：

这是一个带有圆角的示例文本框，使用“border-radius”属性，内联 CSS 仅影响文本框元素。

您可以使用 CSS “border-radius”属性以类似的方式为任何元素圆角。

在Weebly中制作CSS圆角元素