border-radius

CSS3边框圆角属性

border-radius圆角边框是CSS3的新属性，以前网页设计开发中要实现元素的圆角边框，通常是用背景图片来实现的。现在我们只需要给元素添加border-radius属性即可。

兼容性

最常见的一种表现形式是一个值。
如border-radius:10px;它表示元素四个方向的圆角大小都是10px，即每个圆角的“水平半径”和“垂直半半径”都设置为10px；

四个角分开设置
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
每个角的弧度是可以设置两个半径 ，参数间以空格分隔，每个参数允许设置 1 个参数值，第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略未定义，则直接复制第 1 个参数值。

  border-top-left-radius: 10px 10px;
  border-top-right-radius: 20px 30px;
  border-bottom-left-radius: 30px 30px;
  border-bottom-right-radius: 40px 20px;

复合写法 1~4 赋值顺序和margin padding一致
分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）
border-radius: 10px 20px 40px 30px;

三个属性值，第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角。
border-radius:10px 20px 40px;

两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角。
border-radius:20px 40px;

border-radiusborder-radius属性提供 2 个参数，参数间以/分隔，第一组值表示水平半径，第二组值表示垂直半径，每组值也可以同时设置1到4个值，规则与上面相同。如第 2 个参数值省略未定义，则直接复制第 1 个参数值。
border-radius: 95px 95px 65px 65px/100px 100px 65px 65px;

注意： 属性的两个长度第一个是水平半径，第二个是垂直半径，如果第二值省略，它从第一个复制，默认为0 但不可以为负数。

实际运用

导航

nav {    
 width: 100px;   
 height: 50PX;    
 border: 1px solid #000;    
 border-top-left-radius: 100px 100px;    
 border-bottom-right-radius: 100px 100px;   
 text-align: center;    
 line-height: 50px;    
 background-color: green;    
 float: left;
 }

<nav>导航1</nav>
<nav>导航1</nav>
<nav>导航1</nav>

圆

.circle{
   width: 25px;   
   height: 25px;   
   line-height: 25px;   
   text-align: center;    
   border-radius: 50%;    
   color: white;   
   font-weight: bold;   
   font-size: 12px;   
   background-color: red;
}

<div class = "circle">99+</div>

扇形

.quarter-botlf-cir {
   width: 40px;
   height: 40px;
   background: pink;
   border-radius: 0 0 0 40px;
}

花瓣

.flower {
	width: 80px;    
	height: 80px;    
	background: pink;    
	border-radius: 40px 40px 0 40px;
	}