[分享]css中div设置成圆形

CSS是前端开发中经常用到的技术，它可以帮助我们实现各种炫酷的效果，其中设置div为圆形就是其中一种比较基础的技巧，下面我们来看一下如何实现。 div.circle { width: 100px; h...

CSS是前端开发中经常用到的技术，它可以帮助我们实现各种炫酷的效果，其中设置div为圆形就是其中一种比较基础的技巧，下面我们来看一下如何实现。

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

上面的代码中，我们首先创建了一个div元素，并为它指定了一个类名circle，然后使用CSS选择器对这个类名进行样式设置。具体来说，我们指定了div元素的宽度和高度都为100像素，这样就得到了一个正方形的盒子。接着我们使用border-radius属性将边框设置成为圆形的，其中50%的值表示边框的弯曲程度。同时我们设置了盒子内的背景颜色为绿色。

最后需要注意的一点是，要想实现这个效果，必须保证盒子的宽度和高度相等，否则得到的结果就不是一个完美的圆形了。