[分享]css中如何整出一个圆形

在CSS中，想要整出一个圆形并不难，只需要使用border-radius属性即可。

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

以上代码会生成一个宽高均为100像素的圆形，border-radius值设为50%是因为它是相对于元素的宽高计算的。

如果想要改变圆形的颜色和边框大小，可以加上background-color和border属性。

 .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
  } 

以上代码会生成一个红色背景，白色边框，宽2像素的圆形。

如果想要生成椭圆形，只需要将border-radius属性的两个值改成不同的即可。例如：

 .ellipse {
    width: 200px;
    height: 100px;
    border-radius: 100px / 50px;
  } 

以上代码会生成一个宽200像素，高100像素的椭圆形。