中华药网CSS圆角或无图CSS圆角.doc

【华药联合官方网站】资料来自中华药网 CSS文件中，可以用图片的形式实现。也有好多CSSer用XHTML+CSS来实现圆角，也就是无图片CSS圆角，我们不提倡这样做。但在有些时候，这样的圆角还是有一定的好处。无图片CSS圆角的实现主要是应用了1px的微小容器，设置颜色来达到目的。在52CSS.com的文章中，有更多的关于CSS圆角的文档，欢迎进行全站搜索，52CSS.com的搜索功能在列表与内容页的左侧。下面开始看这五个无图片CSS圆角的案例。52CSS.com转载请注明出处。一、简洁型css圆角CSS代码： Example Source Code .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.bdisplay:block;overflow:hidden;.b1,.b2,.b3,.b1b,.b2b,.b3bheight:1px;.b2,.b3,.b4,.b2b,.b3b,.b4b,.bborder-left:1px solid #999;border-right:1px solid #999;.b1,.b1bmargin:0 5px;background:#999;.b2,.b2bmargin:0 3px;border-width:2px;.b3,.b3bmargin:0 2px;.b4,.b4bheight:2px;margin:0 1px;.d1background:#F7F8F9;XHTML代码： Example Source Code 简洁型css圆角矩形 - -华丽的分割线-二、3D效果css圆角CSS代码： Example Source Code .raisedbackground:transparent;width:40%;.raised h1,.raised pmargin:0 10px;.raised h1font-size:2em;color:#fff;.raised ppadding-bottom:0.5em;.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4bdisplay:block;overflow:hidden;font-size:1px;.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3bheight:1px;.raised .b2background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;.raised .b3background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;.raised .b4background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;.raised .b4bbackground:#ccc;border-left:1px solid #eee;border-right:1px solid #999;.raised .b3bbackground:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;.raised .b2bbackground:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;.raised .b1margin:0 5px;background:#fff;.raised .b2, .raised .b2bmargin:0 3px;border-width:0 2px;.raised .b3, .raised .b3bmargin:0 2px;.raised .b4, .raised .b4bheight:2px; margin:0 1px;.raised .b1bmargin:0 5px; background:#999;.raised .boxcontentdisplay:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;XHTML代码： Example Source Code 3D圆角矩形 - -华丽的分割线-三、略带菱形的css圆角CSS代码： Example Source Code .curved background:transparent; width:40%;.curved h1, .curved p margin:0 10px;.curved h1 font-size:2em; color:#fff;.curved p padding-bottom:0.5em;.curved .b1, .curved .b2, .curved .b3, .curved .b4 display:block; overflow:hidden; height:1px;font-size:1px;.curved .b2, .curved .b3, .curved .b4 background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;.curved .b1 margin:0 4px; background:#fff;.curved .b2 margin:0 4px; height:2px;.curved .b3 margin:0 3px;.curved .b4 margin:0; height:1px; border-width:0 3px 0 3px;.curved .boxcontent display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;XHTML代码： Example Source Code 略带菱形的css圆角 - -华丽的分割线-四、特殊css圆角 CSS代码： Example Source Code .pillar background:transparent; width:40%;.pillar h1, .pillar p margin:0 10px;.pillar h1 font-size:2em; color:#fff;.pillar p padding-bottom:0.5em;.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 display:block; overflow:hidden;font-size:1px;.pillar .b1, .pillar .b2, .pillar .b4 height:1px;.pillar .b2, .pillar .b3 background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;.pillar .b4 background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;.pillar .b1 margin:0 2px; background:#fff;.pillar .b2 margin:0 1px; border-width:0 1px;.pillar .b3 height:2px; margin:0;.pillar .b4 margin:0 2px;.pillar .boxcontent display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;XHTML代码： Example Source Code 特殊css圆角矩形 - -华丽的分割线-五、反向css圆角CSS代码： Example Source Code .serif background: transparent; width:40%;.serif h1, .serif p margin:0 10px;.serif h1 font-size:2em; color:#fff;.serif p padding-bottom:0.5em;.serif .b1, .serif .b2, .serif .b3, .serif .b4 display:block; overflow:hidden;font-size:1px;.serif .b1, .serif .b2, .serif .b3 height:1px;.serif .b2, .serif .b3 background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;.serif .b4 background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;.serif .b1 margin:0; background:#fff;.serif .b2 margin:0 1px; border-width:0 2px;.serif .b3 margin:0 3px;.serif .b4 height:2px; margin:0 4px;.serif .boxcontent display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;XHTML代码： Example Source Code 反向css圆角矩形 - 以上为无图圆角，给个有图的圆角吧：圆角图形：CSS代码：.box position:relative;width:200px; .crnr position:absolute;background:url(rounded_03.png) no-repeat;width:10px;height:10px; .tl left:0;top:0;background-position: 0 0; .tr ri