CSS3--圆角

1、border-radius 制作圆角

值可以使用em，ex，pt，px，百分比等

像素单位

height: 20px;

border-radius: 10px; //这就包含了上左，上右，下左，下右。与下面四个等价

border-top-left-radius: 10px;
border-top-right-radius: 10px
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

border-radius: 10px 10px 10px 10px;//顺序左上、右上、右下、左下

圆角尺寸 = height / 2



圆角尺寸 = height

border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

比例单位

使用比例单位时，表示圆弧与两个边交叉的部分占总长度的。当同一边设置了两个时，且总比例>100%时，他们俩均分此边。

border-top-left-radius: 70%;
border-bottom-right-radius: 100%;

画一个半径100px的圆

width: 200px;
height: 200px;
border-radius:100px;

或者

border-radius:50%;

但是，当设置了边框，且样式不一样的时候，就会存在很多问题。因为他们是分开渲染的。因此应该在使用时应该统一样式

兼容性问题

-moz-border-radius
-webkit-border-radius
border-radius  //要写在-webkit-border-radius之下

在单独书写的时候，差别较大

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius