CSS设置圆角边框

在CSS3 中，新增了圆角边框的样式，可以使盒子变成圆角。

原理：(椭)圆与边框相切形成圆角效果，长度越大，圆角角度越大

语法

border-radius:length;

• 参数值可以设置为数值或百分比的形式

• 如果是正方形，想要设置为一个圆，把数值改为高度或者宽度的一半即可，或者直接写50%

• 如果是个矩形，设置为高度的一半就是圆角矩形。

• 该属性是一个简写属性，可以设置四个值，分别代表左上角，右上角，右下角，左下角

• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

• 圆形

  .yuanxing {
      width: 200px;
      height: 200px;
      border-radius:100px;  
      /*或 border-radius:50%*/
  }