无图片CSS圆角的五个实例

CSS圆角的现实一直是大家所热衷的话题，我们进行CSS布局一直强调语义，强调文档的结构。圆角作为页面的外面表现，应该分离到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,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}

XHTML代码：

Example Source Code

<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
简洁型css圆角矩形 - www.52css.com
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>

>>>点击查看效果<<<

----------------------------------------------------华丽的分割线----------------------------------------------------
二、3D效果css圆角

CSS代码：

Example Source Code

.raised{background:transparent;width:40%;}
.raised h1,.raised p{margin:0 10px;}
.raised h1{font-size:2em;color:#fff;}
.raised p{padding-bottom:0.5em;}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;overflow:hidden;font-size:1px;}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}
.raised .b2{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}
.raised .b3{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}
.raised .b4{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}
.raised .b4b{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}
.raised .b3b{background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}
.raised .b2b{background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}
.raised .b1{margin:0 5px;background:#fff;}
.raised .b2, .raised .b2b{margin:0 3px;border-width:0 2px;}
.raised .b3, .raised .b3b{margin:0 2px;}
.raised .b4, .raised .b4b{height:2px; margin:0 1px;}
.raised .b1b{margin:0 5px; background:#999;}
.raised .boxcontent{display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}

XHTML代码：

Example Source Code

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形 - www.52css.com </h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

>>>点击查看效果<<<

----------------------------------------------------华丽的分割线----------------------------------------------------
三、略带菱形的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

<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角 - www.52css.com </h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

>>>点击查看效果<<<

----------------------------------------------------华丽的分割线----------------------------------------------------
四、特殊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

<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形 - www.52css.com </h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

>>>点击查看效果<<<

----------------------------------------------------华丽的分割线----------------------------------------------------
五、反向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

<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形 - </h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

>>>点击查看效果<<<

无图片CSS圆角的五个实例相关推荐

7种CSS圆角框解决方案
7种CSS圆角框解决方案时间: 2009-03-11 / 分类: 前端开发 / 浏览次数: 14,913 次 / 7个评论发表评论本文探讨的是前端设计种最常用的页面圆角框效果的7种不同方法实现解决 ...
DIV+CSS圆角边框
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...
CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于"鑫三无准则" "鑫三无准则"这个概念貌似最早是在去年的去年一篇名叫"关于Google圆角高光高宽自适应按钮及其拓展"的文章中提 ...
html单个圆角图片,CSS教程：一张图片实现圆角
CSS教程:一张图片实现圆角互联网发布时间:2009-04-02 19:33:53 作者:佚名我要评论网页制作Webjx文章简介:准备四个小容器,分别放小圆圈图片的左上.右上.左下 ...
网站性能优化之CSS无图片技术
一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要 ...
html 怎么把图片变成圆角,css怎么样实现图片圆角
css实现图片圆角的方法:首先创建一个HTML示例文件:然后创建一个div元素:最后通过css3的"border-radius"属性给元素添加圆角即可. 本教程操作环境:Windo ...
网页前端知识汇总（一）——CSS如何为网页图片设置圆角效果
是不是有的没有玩过程序的小伙伴浏览网页时会发现有的图片是圆角的,自己保存到本地却是直角的?其实图片性质没有改变,改变的只是网页显示,用遮罩层(CSS处理)后的显示效果,那这些图片的圆角效果是怎么设置的 ...
css让图片显示圆角纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;.从而提升了层级z-index.在其子元素导航内容的层级比拼 ...

无图片CSS圆角的五个实例

无图片CSS圆角的五个实例相关推荐

最新文章

热门文章