<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3绘图</title>
</head>
<style type="text/css">
div{
width:200px;
height:200px;
border:#F00 solid 1px;
margin-bottom:10px;
text-align:center;
vertical-align:middle;}
/*4个角的半径全部是20px*/
div:first-of-type{
border-radius:20px;}
/*第一个是上下，第二个是左右*/
div:nth-of-type(2){
border-radius:20px 40px;
}
/*上——左右——下*/
div:nth-of-type(3){
border-radius:20px 40px 60px;
}
/*上-右-下-左*/
div:nth-of-type(4){
border-radius:20px 40px 60px 80px;}
div:nth-of-type(5){
border-radius:0px 0px 200px;}
/*做成一个整圆*/
div:nth-of-type(6){
border-radius:100px;
}
div:nth-of-type(7){
border-radius:50%;
}
img{
border-radius:50%;
}
</style>
<body>
<div>border-radius:20px;</div>
<div>border-radius:20px 40px;</div>
<div>border-radius:20px 40px 60px;</div>
<div>border-radius:20px 40px 60px;</div>
<div>border-radius:0px 0px 200px;</div>
<div>border-radius:100px;</div>
<div>border-radius:50%;</div>
<img src="img/face.jpg" width="200" height="200">
</body>
</body>
</html>
该案例直接运行查看结果。
版权声明：博主原创文章，转载请说明出处。http://blog.csdn.net/dzy21