<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無标題文檔</title>
<style>
div{
width:100px;
height:100px;
border:1px solid red;
margin:10px;
float:left;
text-align:center;
}
div:nth-of-type(1)
{
border-radius:10px/10px;
}
div:nth-of-type(2)
{
border-radius:15px;
}
div:nth-of-type(3)
{
border-radius:15px 15px 0 0;
}
div:nth-of-type(4)
{
border-radius:15px 0 15px 0;
}
div:nth-of-type(5)
{
border-radius:5px 15px 0 15px;
}
div:nth-of-type(6)
{
border-radius:50%;
}
div:nth-of-type(7)
{
border-radius:50px;
}
img{
border:3px solid #ccc;
border-radius:50%;
}
div:nth-of-type(8)
{
border-radius:50%;
height:50px;
}
div:nth-of-type(9)
{
border-radius:100px 100px 0 0;
height:50px;
}
div:nth-of-type(10)
{
border-radius:100px 0 0 0;
}
div:nth-of-type(11)
{
border-radius:100px 0 0 0;
height:50px;
}
div:nth-of-type(12)
{
border-radius:100px 0 100px 0;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<img src="雲課堂/image/10.jpg"/>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</body>
</html>
border-radius 圓角矩形 
![三分鐘帶你看完CSS3新增的使用者界面和濾鏡屬性1.appearance屬性2.使用filter屬性應用濾鏡[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)