在网上看到一篇文章关于用DIV CSS实现圆角的案例,，但显示效果很美跟大家分享一下 效果图如下： 透明圆角化图片 <br /> /****************************************<br /> 纯CSS圆角框<br /> *****************************************/<br /> *{margin:0;padding:0;font-size:12px;}<br /> body{background:#d3d3d3;}<br /> .wrapper{width:80%;margin:0 auto;}<br /> /*通用样式--容器宽度值*/<br /> .sharp{width:30%;margin:20px auto 0;float:left;margin-left:2%;}<br /> .sharp .content div{padding:10px;text-indent:2em;}<br /> .content{height:150px; background:#fff;}<br /> h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;color:#fff;}<br /> a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}<br /> a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}</p> <p>/*圆角框通用设置样式，如果要运用多个不同颜色，以下部分不用重新变化--------------------------------*/<br /> .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}<br /> .b1,.b8{margin:0 5px;}<br /> .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}<br /> .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}<br /> .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}<br /> .content {border-right:1px solid;border-left:1px solid;overflow:hidden;}<br /> /*图片偏移定位--上面部分*/<br /> .sharp b.b2{background-position:left top;}<br /> .sharp b.b3{background-position:left -1px;}<br /> .sharp b.b4{background-position:left -2px;}<br /> .sharp .content h3{background-position:left -4px;}<br /> /*图片偏移定位--下面部分*/<br /> .sharp b.b7{background-position:left top;}<br /> .sharp b.b6{background-position:left -1px;}<br /> .sharp b.b5{background-position:left -2px;}<br /> .sharp .content h3{background-position:left -4px;}</p> <p>/*颜色方案一,绿色风格----------------------------------------*/<br /> /*边框色*/<br /> .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#A0C044;}<br /> .color1 .b1,.color1 .b8{background:#A0C044;}<br /> .color1 h3{border-bottom:1px #679800 solid;}<br /> /*图片路径*/<br /> .color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}<br /> .color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}</p> <p>/*颜色方案二,深兰风格----------------------------------------*/<br /> /*边框色*/<br /> .color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .content{border-color:#20548A;}<br /> .color2 .b1,.color2 .b8{background:#20548A;}<br /> .color2 h3{border-bottom:1px #20548A solid;}<br /> /*图片路径*/<br /> .color2 .b2,.color2 .b3,.color2 .b4,.color2 h3{background:url(images/bg2.gif) repeat-x;}<br /> .color2 .b5,.color2 .b6,.color2 .b7{background:#FFF;}</p> <p>/*颜色方案三,淡黄风格----------------------------------------*/<br /> /*边框色*/<br /> .color3 .b2,.color3 .b3,.color3 .b4,.color3 .b5,.color3 .b6,.color3 .b7,.color3 .content{border-color:#D27D00;}<br /> .color3 .b1,.color3 .b8{background:#D27D00;}<br /> .color3 h3{border-bottom:1px #D27D00 solid;}<br /> /*图片路径*/<br /> .color3 .b2,.color3 .b3,.color3 .b4,.color3 h3{background:url(images/bg3.gif) repeat-x;}<br /> .color3 .b5,.color3 .b6,.color3 .b7{background:#FFF;}</p> <p>/*颜色方案四,红色风格----------------------------------------*/<br /> /*边框色*/<br /> .color4 .b2,.color4 .b3,.color4 .b4,.color4 .b5,.color4 .b6,.color4 .b7,.color4 .content{border-color:#A81201;}<br /> .color4 .b1,.color4 .b8{background:#A81201;}<br /> .color4 h3{border-bottom:1px #A81201 solid;}<br /> /*图片路径*/<br /> .color4 .b2,.color4 .b3,.color4 .b4,.color4 h3{background:url(images/bg4.gif) repeat-x;}<br /> .color4 .b5,.color4 .b6,.color4 .b7{background:#FFF;}</p> <p>/*颜色方案五,紫色风格----------------------------------------*/<br /> /*边框色*/<br /> .color5 .b2,.color5 .b3,.color5 .b4,.color5 .b5,.color5 .b6,.color5 .b7,.color5 .content{border-color:#AE0474;}<br /> .color5 .b1,.color5 .b8{background:#AE0474;}<br /> .color5 h3{border-bottom:1px #AE0474 solid;}<br /> /*图片路径*/<br /> .color5 .b2,.color5 .b3,.color5 .b4,.color5 h3{background:url(images/bg5.gif) repeat-x;}<br /> .color5 .b5,.color5 .b6,.color5 .b7{background:#FFF;}</p> <p>/*颜色方案六,深黄风格----------------------------------------*/<br /> /*边框色*/<br /> .color6 .b2,.color6 .b3,.color6 .b4,.color6 .b5,.color6 .b6,.color6 .b7,.color6 .content{border-color:#E0750F;}<br /> .color6 .b1,.color6 .b8{background:#E0750F;}<br /> .color6 h3{border-bottom:1px #E0750F solid;}<br /> /*图片路径*/<br /> .color6 .b2,.color6 .b3,.color6 .b4,.color6 h3{background:url(images/bg6.gif) repeat-x;}<br /> .color6 .b5,.color6 .b6,.color6 .b7{background:#FFF;}</p> <p>/*颜色方案七,黑色风格----------------------------------------*/<br /> /*边框色*/<br /> .color7 .b2,.color7 .b3,.color7 .b4,.color7 .b5,.color7 .b6,.color7 .b7,.color7 .content{border-color:#0D0701;}<br /> .color7 .b1,.color7 .b8{background:#0D0701;}<br /> .color7 h3{border-bottom:1px #0D0701 solid;}<br /> /*图片路径*/<br /> .color7 .b2,.color7 .b3,.color7 .b4,.color7 h3{background:url(images/bg7.gif) repeat-x;}<br /> .color7 .b5,.color7 .b6,.color7 .b7{background:#FFF;}</p> <p>/*颜色方案八,淡蓝风格----------------------------------------*/<br /> /*边框色*/<br /> .color8 .b2,.color8 .b3,.color8 .b4,.color8 .b5,.color8 .b6,.color8 .b7,.color8 .content{border-color:#3DABDD;}<br /> .color8 .b1,.color8 .b8{background:#3DABDD;}<br /> .color8 h3{border-bottom:1px #3DABDD solid;}<br /> /*图片路径*/<br /> .color8 .b2,.color8 .b3,.color8 .b4,.color8 h3{background:url(images/bg8.gif) repeat-x;}<br /> .color8 .b5,.color8 .b6,.color8 .b7{background:#FFF;}</p> <p>/*颜色方案九,褐色风格----------------------------------------*/<br /> /*边框色*/<br /> .color9 .b2,.color9 .b3,.color9 .b4,.color9 .b5,.color9 .b6,.color9 .b7,.color9 .content{border-color:#863313;}<br /> .color9 .b1,.color9 .b8{background:#863313;}<br /> .color9 h3{border-bottom:1px #863313 solid;}<br /> /*图片路径*/<br /> .color9 .b2,.color9 .b3,.color9 .b4,.color9 h3{background:url(images/bg9.gif) repeat-x;}<br /> .color9 .b5,.color9 .b6,.color9 .b7{background:#FFF;}</p> <p> 圆角图片方案一 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案二 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案三 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案四 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案五 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案六 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案七 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案八 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客 圆角图片方案九 标题采用一张上下渐变的图片以水平平铺方式实现，看看图片的也可以做成外圆角透明的效果了。" title="更多内容请访问博客">博客
