所需图片:
corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bg
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Previe of Type - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title>
<style>
body {margin:; padding:40px; font:% Georgia, "Times New Roman", Times, serif; background:#FFF;} /* Rounded-cornered divs -*/
.roundedBox {position:relative; padding:17px; margin:10px ;} /*- All the corners -*/
.corner {position:absolute; width:17px; height:17px;} /*- Each corner -*/
.topLeft {top:; left:; background-position:-1px -1px;}
.topRight {top:; right:; background-position:-19px -1px;}
.bottomLeft {bottom:; left:; background-position:-1px -19px;}
.bottomRight {bottom:; right:; background-position:-19px -19px;}
/*- Type1 - Blue -*/
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(img/corners-type1.gif);} /*- Type2 - Green -*/
#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(img/corners-type2.gif);} /*- Type3 - Violet -*/
#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(img/corners-type3.gif);} /*- Type4 - Red with border -*/
/* We change the corners' position and add the border */
#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(img/corners-type4.gif);}
#type4 .topLeft {top:-1px; left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;} /*- Type5 - With gradient -*/
/* We change the top corners' height, and the bottom corners background-position. We must also add to the containing div a gradient to repeat in x. */
#type5 {background:#FECBCA url(img/roundedbox-type5-bg.png) repeat-x ; min-height:110px;}
#type5 .corner {background-image:url(img/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;} </style>
</head> <body> <!-- Type1: Blue -->
<div class="roundedBox" id="type1">
<strong>My content in roundedBox Type </strong>
<div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
</div> <!-- Type2: Green -->
<div class="roundedBox" id="type2">
<strong>My content in roundedBox Type </strong>
<div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
</div> <!-- Type3: Violet -->
<div class="roundedBox" id="type3">
<strong>My content in roundedBox Type </strong>
<div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
</div> <!-- Type4: Red with border -->
<div class="roundedBox" id="type4">
<strong>My content in roundedBox Type </strong>
<div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
</div> <!-- Type5: With gradient -->
<div class="roundedBox" id="type5">
<strong>My content in roundedBox Type </strong>
<div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
</div> </body>
</html>