div circle - CSS

概述

div circle 是一种使用纯CSS绘制圆形的方法。CSS的圆形实现比使用图像更为灵活，可以自由调整大小，颜色，边框等属性。通过使用 div元素，可以避免在页面中使用额外的<svg>元素。

实现方式

使用 border-radius 属性实现一个圆形。

例如，要创建一个 100px 的圆，可以如下设置：

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

这将生成一个圆形div。渲染代码如下:

<div></div>

这个圆的颜色将是默认背景颜色，你可以通过设置 background-color 来改变颜色。例如，要让圆形变成蓝色：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

带边框的圆

可以在圆形上添加一个边框，通过设置 border 属性。

例如，要创建一个红色边框的圆，可以如下设置：

div {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  border-radius: 50%;
}

你可以在 border 属性中设置边框的宽度，样式，颜色。

半透明的圆形

如果要创建一个半透明的圆形，可以使用 opacity 属性。

例如：

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  opacity: 0.5;
}

总结

使用 div circle - CSS 可以轻松绘制一个圆形并自定义属性，灵活的应用场景包括图标，按钮等等。

参考链接

• CSS圆形