迹忆客 专注技术分享

本文将介绍一种在 CSS 中创建圆形按钮的方法。

在 CSS 中使用 border-radius 属性创建圆形按钮

我们可以使用 border-radius 属性在 CSS 中创建一个圆形按钮。该属性通过将半径添加到元素的角来为选定元素创建圆角。

border-radius 属性采用一到四个值作为选项。我们将研究下面的例子。

border-radius 有四个值，初始值适用于左上角，第二个适用于右上角，第三个值适用于右下角，最终值适用于底部-左角。

border-radius: 12px 50px 20px 5px

对于三个值，初始值应用于左上角，第二个值应用于右上角和左下角，最终值应用于右下角。

border-radius: 12px 50px 20px

初始值适用于两个值中的左上角和右下角，后者适用于右上角和左下角。

border-radius: 12px 50px

当设置单个半径时，它会形成一个圆角，因为它适用于元素的所有角。

border-radius: 12px

我们可以使用 border-radius 属性来创建一个完美的圆形按钮，方法是将 border-radius 提供为按钮高度和宽度的一半。我们可以使用一个值 border-radius 来进行演示。

例如，使用 HTML 中的 button 标签创建一个按钮。在按钮内写下文本点击这里。

现在在 CSS 中，选择按钮并将按钮的 height 和 width 指定为 200px。然后，将 border-radius 指定为 50%或 100px。

我们输入的 100px``border-radius 是按钮高度和宽度的一半。结果，按钮的每个角将形成一个圆角，其边长半径的一半。

我们可以使用 border-radius 的 50%值来简化它。因此，我们使用 CSS 的 border-radius 属性构建了一个圆形按钮。

示例代码：

<button> Click here </button>

button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}

button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}