CSS sprite 圆角——源代码

所需图片：
　　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 4 - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title>
<style>
body {margin:0; padding:40px; font:76% Georgia, "Times New Roman", Times, serif; background:#FFF;}

/* Rounded-cornered divs -*/
.roundedBox {position:relative; padding:17px; margin:10px 0;}

/*- All the corners -*/
.corner {position:absolute; width:17px; height:17px;}

/*- Each corner -*/
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; 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 0 0; 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 1</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 2</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 3</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 4</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 5</strong>
        <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div>
    </div>


</body>
</html>
相关文章：

你感兴趣的文章：

标签云：
