代码改变世界

分享冰极峰的CSS圆角边框

2009-12-03 15:18  iBlog  阅读(869)  评论(0)  编辑  收藏  举报
代码
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明圆角化图片</title>
<style type="text/css">
/****************************************
纯CSS圆角框
冰极峰原创
*****************************************/
*{margin:0;padding:0;font-size:12px;}
body{background:#d3d3d3;}
.wrapper{width:80%;margin:0 auto;}
/*通用样式--容器宽度值*/
.sharp{width:30%;margin:0;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:150px; background:#fff;}
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;color:#fff;}
a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}

/*圆角框通用设置样式，如果要运用多个不同颜色，以下部分不用重新变化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*图片偏移定位--上面部分*/
.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}
/*图片偏移定位--下面部分*/
.sharp b.b7{background-position:left top;}
.sharp b.b6{background-position:left -1px;}
.sharp b.b5{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}

/*颜色方案一,绿色风格----------------------------------------*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#A0C044;}
.color1 .b1,.color1 .b8{background:#A0C044;}
.color1 h3{border-bottom:1px #679800 solid;}
/*图片路径*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}

/*颜色方案二,深兰风格----------------------------------------*/
/*边框色*/
.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .content{border-color:#20548A;}
.color2 .b1,.color2 .b8{background:#20548A;}
.color2 h3{border-bottom:1px #20548A solid;}
/*图片路径*/
.color2 .b2,.color2 .b3,.color2 .b4,.color2 h3{background:url(images/bg2.gif) repeat-x;}
.color2 .b5,.color2 .b6,.color2 .b7{background:#FFF;}

/*颜色方案三,淡黄风格----------------------------------------*/
/*边框色*/
.color3 .b2,.color3 .b3,.color3 .b4,.color3 .b5,.color3 .b6,.color3 .b7,.color3 .content{border-color:#D27D00;}
.color3 .b1,.color3 .b8{background:#D27D00;}
.color3 h3{border-bottom:1px #D27D00 solid;}
/*图片路径*/
.color3 .b2,.color3 .b3,.color3 .b4,.color3 h3{background:url(images/bg3.gif) repeat-x;}
.color3 .b5,.color3 .b6,.color3 .b7{background:#FFF;}

/*颜色方案四,红色风格----------------------------------------*/
/*边框色*/
.color4 .b2,.color4 .b3,.color4 .b4,.color4 .b5,.color4 .b6,.color4 .b7,.color4 .content{border-color:#A81201;}
.color4 .b1,.color4 .b8{background:#A81201;}
.color4 h3{border-bottom:1px #A81201 solid;}
/*图片路径*/
.color4 .b2,.color4 .b3,.color4 .b4,.color4 h3{background:url(images/bg4.gif) repeat-x;}
.color4 .b5,.color4 .b6,.color4 .b7{background:#FFF;}

/*颜色方案五,紫色风格----------------------------------------*/
/*边框色*/
.color5 .b2,.color5 .b3,.color5 .b4,.color5 .b5,.color5 .b6,.color5 .b7,.color5 .content{border-color:#AE0474;}
.color5 .b1,.color5 .b8{background:#AE0474;}
.color5 h3{border-bottom:1px #AE0474 solid;}
/*图片路径*/
.color5 .b2,.color5 .b3,.color5 .b4,.color5 h3{background:url(images/bg5.gif) repeat-x;}
.color5 .b5,.color5 .b6,.color5 .b7{background:#FFF;}

/*颜色方案六,深黄风格----------------------------------------*/
/*边框色*/
.color6 .b2,.color6 .b3,.color6 .b4,.color6 .b5,.color6 .b6,.color6 .b7,.color6 .content{border-color:#E0750F;}
.color6 .b1,.color6 .b8{background:#E0750F;}
.color6 h3{border-bottom:1px #E0750F solid;}
/*图片路径*/
.color6 .b2,.color6 .b3,.color6 .b4,.color6 h3{background:url(images/bg6.gif) repeat-x;}
.color6 .b5,.color6 .b6,.color6 .b7{background:#FFF;}

/*颜色方案七,黑色风格----------------------------------------*/
/*边框色*/
.color7 .b2,.color7 .b3,.color7 .b4,.color7 .b5,.color7 .b6,.color7 .b7,.color7 .content{border-color:#0D0701;}
.color7 .b1,.color7 .b8{background:#0D0701;}
.color7 h3{border-bottom:1px #0D0701 solid;}
/*图片路径*/
.color7 .b2,.color7 .b3,.color7 .b4,.color7 h3{background:url(images/bg7.gif) repeat-x;}
.color7 .b5,.color7 .b6,.color7 .b7{background:#FFF;}

/*颜色方案八,淡蓝风格----------------------------------------*/
/*边框色*/
.color8 .b2,.color8 .b3,.color8 .b4,.color8 .b5,.color8 .b6,.color8 .b7,.color8 .content{border-color:#3DABDD;}
.color8 .b1,.color8 .b8{background:#3DABDD;}
.color8 h3{border-bottom:1px #3DABDD solid;}
/*图片路径*/
.color8 .b2,.color8 .b3,.color8 .b4,.color8 h3{background:url(images/bg8.gif) repeat-x;}
.color8 .b5,.color8 .b6,.color8 .b7{background:#FFF;}

/*颜色方案九,褐色风格----------------------------------------*/
/*边框色*/
.color9 .b2,.color9 .b3,.color9 .b4,.color9 .b5,.color9 .b6,.color9 .b7,.color9 .content{border-color:#863313;}
.color9 .b1,.color9 .b8{background:#863313;}
.color9 h3{border-bottom:1px #863313 solid;}
/*图片路径*/
.color9 .b2,.color9 .b3,.color9 .b4,.color9 h3{background:url(images/bg9.gif) repeat-x;}
.color9 .b5,.color9 .b6,.color9 .b7{background:#FFF;}

</style>
</head>

<body>
<div class="wrapper">
    <!--风格一，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color1">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案一</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格二，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color2">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案二</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格三，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color3">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案三</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格四，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color4">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案四</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格五，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color5">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案五</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格六，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color6">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案六</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格七，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color7">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案七</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格八，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color8">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案八</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
    
    <!--风格九，只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color9">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="content">  
              <h3>圆角图片方案九</h3>
              <div>标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。<br/><br/><p style="text-align:right;"><a href="http://binyong.cnblogs.com" title="更多内容请访问冰极峰博客">冰极峰博客</a></p></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
</div>
</body>
</html>

demo download：css圆角