[分享]css3怎么画一个圆

在CSS3中，我们可以使用borderradius属性来画一个圆形，该属性有四个值，分别是上左角、上右角、下右角和下左角的圆角半径。 borderradius:50; / 圆角半径设为50 / wid...

在CSS3中，我们可以使用border-radius属性来画一个圆形，该属性有四个值，分别是上左角、上右角、下右角和下左角的圆角半径。

 border-radius:50%; /* 圆角半径设为50% */
  width:200px; /* 设置宽度 */
  height:200px; /* 设置高度，
  这两个值要保持一致，才能画出圆 */
  background-color:#ff0000; /* 设置背景颜色 */ 

以上代码将会画出一个200x200的圆形，如果想画一个比例不为1:1的圆形，可以调整width和height的值，使它们相等即可。

另外，我们还可以将border-radius的四个值分别设置，来画出其他形状的圆角，例如左上角和右下角为圆角，而左下角和右上角为直角的矩形：

 border-radius:20px 0 20px 0; /* 分别对应上左、上右、下右、下左角的圆角半径 */
  width:200px;
  height:100px;
  background-color:#ff0000; 

以上代码将会画出一个左上角和右下角为圆角的矩形。