CSS Circle

我们可以使用 CSS 设计来创建和设计不同的形状。Web 应用程序需要一个圆形用于功能。我们可以使用标签的简单和多个 CSS 属性来创建圆形。我们可以设置 HTML 元素的 height、width 和 border-radius。

基本 CSS 填充圆

基本填充圆显示不同的颜色。我们可以使用 background 属性来填充圆形。圆形可以填充颜色、文本和任何信息。

语法

以下语法显示了 CSS 圆形设计。

参数

以下参数是圆形所必需的。

• Height (高度): 使用 height 属性设置圆形的垂直半径。
• Width (宽度): 使用 height 属性设置圆形的水平半径。height 和 width 必须设置在精确的测量值上。
• Background colour (背景颜色): 背景颜色显示圆形区域。它提供了标签的填充圆形。
• Border-radius (边框半径): 半径有助于弯曲 height 和 width 的边框。border-radius 默认可以设置为 50%。

示例

该示例显示了网页的基本 CSS 圆形设计。我们可以为圆形使用多种设计。

示例 1

以下示例使用不带数据的简单圆形。

输出

输出显示了标签的基本圆形。

示例 2

以下示例使用带有数据和不同背景颜色的简单圆形。

输出

输出显示了标签的基本圆形。

基本 CSS 空心圆

基本空心圆显示不同的边框颜色。我们可以使用 border 属性来获取圆形的大小。圆形可以设置为颜色、文本和任何信息。

语法

以下语法显示了 CSS 圆形设计。

参数

以下参数是圆形所必需的。

• Height 和 width (高度和宽度): 是所有类型圆的基本属性。height 和 width 可以设置为相同的值。
• Border (边框): 边框颜色显示圆形区域。它可以是任何尺寸和任何颜色。
• Border-radius (边框半径): 半径创建了圆形的弯曲。border-radius 默认设置为 50%。

示例

该示例显示了网页的基本 CSS 空心圆形设计。我们可以为圆形形状使用多种颜色和尺寸。

示例 1

以下示例使用不带数据的简单边框圆形。

输出

输出显示了标签的基本圆形。

示例 2

以下示例使用带有数据的简单边框圆形。

输出

输出显示了标签的基本圆形。

CSS 圆形设计

圆形设计显示了 CSS 属性的大小、边框、背景和信息。

示例

以下示例显示了不同的背景和边框颜色。我们可以为所有必需的标签创建圆形。

示例 1

该示例创建了具有不同边框颜色和不同背景颜色的多个圆形。

输出

输出显示了标签的圆形设计。

示例 2

该示例为主要的 div 标签创建了带有背景和边框颜色的简单圆形。

输出

输出显示了给定标签的圆形设计。

结论

CSS 属性创建并描述了带有数据和设计的圆形。我们可以在圆形中插入数据、信息和图像。