圆角练习.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
del,ins,a{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
/*CSS reset*/
body{margin:0 auto;}
p{margin:25px auto 0;width:50px;height:50px;background:#d5d2c1;line-height:50px;text-align:center;font-weight:bold;}
.p1{border-radius:10px;}
.p2{border-radius:25px;}
.p3{border-radius:25px 0;}
.p4{border-radius:25px 0 25px 25px;}
.p5{border-radius:0 0 0 25px;}
.p6{width:100px;border-radius:50px/25px;}
.p7{
width:0;
height:0;
background:transparent;
border:25px solid #d5d2c1;
border-radius:25px;
border-right-color:transparent;}
.p8{width:0;height:0;background:transparent;border:25px solid transparent;border-radius:25px/10px;border-top-color:red;border-bottom-color:yellow;}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<p class='p1'>A</p>
<p class='p2'>B</p>
<p class='p3'>C</p>
<p class='p4'>D</p>
<p class='p5'>E</p>
<p class='p6'>F</p>
<p class='p7'>G</p>
<!-- <p class='p8'>H</p> -->
</body>
</html>
