圆角border-radius

一、语法

1、分开写

border-top-left-radius:左上;
border-top-right-radius:右上;
border-bottom-right-radius:右下;
border-bottom-left-radius:左下;

2、合并写

（1）四个参数

 border-radius:左上 右上 右下 左下;

（2）三个参数

border-radius:左上  右上左下  右下;

（3）两个参数

border-radius:左上右下  右上左下;

（4）1个参数

border-radius:四个角一样;

二、实例

1、一个圆角（右上）

(1)样式

 #abc{
	 	width: 400px;
	 	height: 400px;;
	 	background-color: red;
 		margin-top:100px;
 		border-top-right-radius:2em; 
	 }

(2)元素

 <div id="abc"></div>

(3)效果

2、两个圆角（左上、右上）

(1)样式

#fillet{
	 	width:300px;
	 	height: 400px;
	 	background-color: green;
	 	border-top-left-radius:2em;
		border-top-right-radius:2em;
		border-bottom-right-radius:0em;
		border-bottom-left-radius:0em; 
	}

(2)元素

<div id="fillet"></div>

(3)效果

3、三个圆角（左上、右上、右下）

(1)样式

 #ef{
	 	width: 400px;
	 	height: 400px;;
	 	background-color: black;
 		margin-top:100px;
 		border-top-left-radius:2em;
		border-top-right-radius:2em;
		border-bottom-right-radius:2em;
	 }

(2)元素

<div id="ef"></div>

(3)效果

4、四个圆角

(1)样式

 #gh{
	 	width: 400px;
	 	height: 400px;;
	 	background-color: pink;
 		margin-top:100px;
 		border-radius:2em;
	 }

(2)元素

<div id="gh"></div>

(3)效果

5、不同比例圆角(2种：左上、右下10px ；左下、右上100px)

(1)样式

#son{
	 	width: 400px;
	 	height: 400px;;
	 	background-color: blue;
 		margin-top:100px;
 	 	border-radius:10px  100px;
 }

(2)元素

<div id="son"></div>

(3)效果

6、不同比例圆角(3种：左上20px；右上、左下50px ；右下100px)

(1)样式

 #gh{
	 	width: 400px;
	 	height: 400px;;
	 	background-color: #9400D3;
 		margin-top:100px;
 		border-radius:20px 50px 100px;
	}

(2)元素

<div id="gh"></div>

(3)效果