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