CSS生成各种形状代码（正方形、长方形、圆形、椭圆形）

前端技术梦想屋 2019-7-21 6701 0

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

正方形

#square {
width: 100px;
height: 100px;
background: red;
}

长方形

#rectangle {
width: 200px;
height: 100px;
background: red;
}

圆形

 #circle {
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%
    }

椭圆形

#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}