代码块
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3 圆角</title>
</head>
<body>
<div class="div-common radiusAttr">CSS3 圆角属性</div>
<div class="div-common twoRadius">两个值</div>
<div class="div-common threeRadius">三个值</div>
<div class="div-common fourRadius">四个值</div>
<div class="div-common bgimgradius">指定背景图片的元素圆角</div>
<div class="div-common borderradius">指定边框的元素圆角</div>
<div class="div-common bgradius">指定背景颜色的元素圆角!</div>
<div class="borderRadius">border-radius 属性允许您为元素添加圆角边框！</div>
</body>
</html>
css样式:
<style type="text/css" media="screen">
div{
margin:50px;
}
.borderRadius{
border:2px solid #a1a1a1;
padding:10px 40px;
background-color: #ddd;
width: 300px;
border-radius:25px;
}
.div-common{
width: 200px;
height: 150px;
padding: 20px;
}
.bgradius{
background-color: #8AC007;
border-radius: 25px;
}
.borderradius{
border:1px solid #8AC007;
border-radius: 25px;
}
.bgimgradius{
border-radius: 25px;
background:url(pulpitrock.jpg) repeat left top;
}
.fourRadius{
background-color: #8AC007;
border-radius: 15px 50px 30px 5px;
}
.threeRadius{
background-color: #8AC007;
border-radius: 15px 50px 30px;
}
.twoRadius{
background-color: #8AC007;
border-radius: 15px 50px;
}
.radiusAttr{
background-color: #8AC007;
/*border-radius: 20px;*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>