代码改变世界

分享冰极峰的CSS圆角边框

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

demo download:css圆角