html5圆角例证 _HTML/CSS

html5圆角例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5圆角例子</title>
<style type="text/css">
??? body{
??? ??? background-color: #000000;
??? }
??? div{
??? ??? width: 100px;
??? ??? height: 100px;
??? ??? margin: 5px;
??? ??? border: 5px solid white;
??? ??? background-color: #efefef;
??? }
??? #dv-all{
??? ??? border-radius:15px;
??? ??? -webkit-border-radius:15px;
??? ??? -moz-border-radius:15px;
??? }
??? #dv-top-left{
??? ??? border-top-left-radius:15px;
??? ??? -webkit-border-top-radius:15px;
??? ??? -moz-border-top-radius:15px;
??? }
??? #dv-top-right{
??? ??? border-top-right-radius:15px;
??? ??? -webkit-border-top-right-radius:15px;
??? ??? -moz-border-top-right-radius:15px;
??? }
??? #dv-bottom-left{
??? ??? border-bottom-left-radius:15px;
??? ??? -webkit-border-bottom-left-radius:15px;
??? ??? -moz-border-bottom-left-radius:15px;
??? }
??? #dv-bottom-right{
??? ??? border-bottom-right-radius:15px;
??? ??? -webkit-border-bottom-right-radius:15px;
??? ??? -moz-border-bottom-right-radius:15px;
??? }
</style>
</head>
<body>
??? <div id="dv-all">全圆角例子</div>
??? <div id="dv-top-left">左上圆角例子 </div>
??? <div id="dv-top-right">右上圆角例子</div>
??? <div id="dv-bottom-left">左下圆角例子</div>
??? <div id="dv-bottom-right">右下圆角例子</div>
</body>
</html>