border-radius的第二个属性

这个很基本...不过本学渣最近才感受到他的第二个属性的魅力

border-radius这个属性相信用过css3的人都使用过

以下是在chrome下渲染的一个很基本的图形

#circle {
	display: block;
	width: 200px;
	height: 200px;
	-webkit-border-radius: 100px;   //chrome 和 ie9  能解析这个
	   -moz-border-radius: 100px;   //firefox无法解析这个 坑爹货
	    -ms-border-radius: 100px;   //ie无法解析这个
	        border-radius: 100px;   //都能解析 -- w3c标准
	background-color: red;
}

画出一个图形为

这边只利用了border-radius的一个属性 他还有第二个参数

#circle {
	display: block;
	width: 200px;
	height: 100px;
	-webkit-border-radius: 100px / 50px;
	   -moz-border-radius: 100px / 50px;
	    -ms-border-radius: 100px / 50px;
	        border-radius: 100px / 50px;
	background-color: red;
}

正确答案...他就是一个椭圆/....第一个参数是 水平半径....第二个参数是垂直半径........

这个知识点比较弱智....不过昨天刚刚看到....好吧....分享一下

当然border-radius还有其他的.....后面带四个参数的....两个参数的....这边统一列出来....以下就以代码和贴图的形式

#circle {
	display: block;
	width: 200px;
	height: 100px;	
	-webkit-border-radius: 100px  50px;
	   -moz-border-radius: 100px  50px;
	    -ms-border-radius: 100px  50px;
		border-radius: 100px  50px;
	background-color: red;
}

顺序分别是    左上和右下      右上和左下  ....

#circle {
	display: block;
	width: 200px;
	height: 100px;
	-webkit-border-radius: 100px 50px 50px 100px;
	   -moz-border-radius: 100px 50px 50px 100px;
	    -ms-border-radius: 100px 50px 50px 100px;
	        border-radius: 100px 50px 50px 100px;
	background-color: red;
}

顺序依次为   左上   右上  右下   左下 ......学过css的根据上右下左这个口诀推一下就行了

当然border-radius还有其他的....比如  border-top-left-radius   border-bottom-right-radius这个些细化的属性.....根据名字就知道他是干嘛的....不过别忘记 top和left的前后位置就行....

他的参数有一个的 两个的 三个的 四个的....各自试试....感觉还是不错的