代碼塊
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>