像、当中我们使用了很多次border-radius属性，这个属性可以说是CSS3中非常牛x的属性之一！
为什么这么说呢？
很简单在C3时代前，大家想在网页上画圆，怎么办？？
必须使用多张图片作为背景图案！
CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，只需要border-radius属性就可以。
文字看起来，不是很，但是得自己动手用多背景分割画圆，就知道有多苦逼了。。。
话不多说，这次好好介绍下，boder-radius的玩法
先看W3C官方给出的定义：
border-radius（含义是"边框半径"）
你为这个属性提供一个值，就能同时设置四个圆角的半径。
所有合法的CSS度量值都可以使用：em、px、百分比等等。
先上一段代码：
!DOCTYPEhtml
htmllang="en"
head
metacharset="UTF-8"
titleborder详解/title
styletype="text/css"
.boder{
margin:auto;/*快速水平居中*/
height:px;
width:px;
background:#6FE;
border:2pxsolid#;
}
/style
/head
body
divclass="boder"/div
/body
/html
效果图：
一个长宽都是px的div方框，背景色#6FE，边框2px宽，黑色。
现在就要有请，boder-radius闪亮登场！
.boder{
/*其他*/
boder-radius:50%;
}
效果图：
当值为50%时，即是圆形。
看下boder-radius:%;
还是圆形，这里面牵扯到一场圣战：有兴趣的可以点击文末的阅读原文查看详情，不作为本帖重点！
不同属性的百分比值相对的内容是不一样的，对吧。
比方说translate是自身，width/height是父级，background-position需要尺寸差计算等。
所以%比部分先不说了，从px说起
设置为boder-radius:50px;
就是将每个圆角的"水平半径"和"垂直半径"都设置为50px。
水平半径和垂直半径指的又是什么呢？
你可以不用管这两个内部怎么作用机理，知道：
px值越大，对应弧度越大border-radius可以同时设置1到4个值。
跟我们在25那边距总记得规律类似。
如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
如果设置1个值，表示4个圆角都使用这个值。
如果设置两个值，第一个值（左上+右下），使用第二个值（右上+左下）。
如果设置三个值，表示第一个值（左上），第二个值（右上+左下），第三个值（右下）。
设置个三个值：
border-radius:13px33px66px;
效果图：
其他的留给你自己去玩～
border-radius还可以用斜杠设置第二组值。
第一组值表示水平半径，第二组值表示垂直半径。
两组值也可以同时设置1到4个值，应用规则与第一组值相同。
例如：
border-radius:10px33px20px/6px3px9px10px;
效果图：
除了同时设置四个圆角以外，还可以单独对每个角进行设置。
对应四个角，CSS3提供四个单独的属性：
★border-top-left-radius，左上★border-top-right-radius，右上★border-bottom-right-radius，右下★border-bottom-left-radius，左下举个例子：
border-top-left-radius:66px;
效果图：
裂墙推荐订阅专辑：
HTML5-庖丁解牛
戳原文，更有料！预览时标签不可点收录于合集#个上一篇下一篇