Details on how to achieve CSS3 in the Border-radius (fillet), the specific code is as follows, interested friends can refer to ha, I hope to help you
To achieve a rounded corner of a border
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
Behavior:url (BORDER-RADIUS.HTC);
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<style type= "Text/css" >
Body {
Background-color: #fff;
font:normal 11pt trebuchet ms,arial,sans-serif;
}
. box1 {
Background-color: #f0f0f0;
width:533px;
height:50px;
margin:0 auto 50px Auto;
padding:20px;
border:1px solid #d7d7d7;
-moz-border-radius:11px;
-webkit-border-radius:11px;
border-radius:10px;
}
. box2 {
background:transparent URL (ashera.jpg); No-repeat top left;
width:420px;
height:220px;
margin:0 auto 35px Auto;
padding:30px;
color: #fff;
Font-weight:bold;
border:11px solid #35b70e;
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
Behavior:url (BORDER-RADIUS.HTC);
}
. box3 {
Background-color: #ddd;
width:210px;
height:30px;
padding:20px;
Position:absolute;
top:5px; left:5px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
Behavior:url (BORDER-RADIUS.HTC);
}
. rel {
margin:50px 0 0 33px;
padding:25px;
position:relative;
Z-index:inherit;
zoom:1; /* for IE6 */
}
</style>
</head>
<body>
<p>not just divs, but any element*</p>
<div class= "rel" >
<div class= "Box1" >
11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
<div class= "Box2" >
this cat is a hybrid of domestic and wild breeds:)
</div>
<div class= "Box3" >
The box is absolutely positioned
</div>
</div>
</body>
</html>