语法:

border-radius:数值+单位;

  1.设置一个值

border-radius:20px;

  四个方向的圆角均为20px

  2.设置两个值

border-radius:10px 50px;

  左上角和右下角为10px;右上角和左下角为50px

  3.设置三个值

border-radius:10px 100px 50px;

  左上角为10px;右上和左下为100px;右下为50px

  4.设置四个值

border-radius:0px 10px 50px 100px;

  顺时针方向依次为左上,右上,右下,左下

  5.用斜杠来设置第二组值

border-radius:100px/50px;

  第一组值代表四个方向的水平半径都为100px;第二组值代表四个方向的垂直半径都为50px

  6.还可以单独设置某一个方向的圆角

  左上角

border-top-left-radius:10px;

  右上角

border-top-right-radius:10px;

  右下角

border-bottom-right-radius:10px;

  左下角

border-bottom-left-radius:10px;

  注:

border-top-left-radius:50px 10px;

  左上角圆角的水平半径为50px,垂直半径为10px

  7.设置为圆形

border-radius:50%;