CSS图形
- GLORY - 酷壳 - CoolShell.cn下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.
CSS圆角实现详解
标签：
css
| 发表时间：2011-07-12 15:51 | 作者：thenbsp ~Wing~
出处：http://www.cnblogs.com/
上次在群里有同学提出这样的问题，因为之前一直在用传统的Div，所以当时没能回答出来，之后经过Google了相关资料后，总结并实践了各种实现方法，现在将它写了来和大家分享一下，如果你是一个Div+Css老鸟并且已经熟练掌握，那么请直接跳过本文（您的时间一定很宝贵吧，呵呵！），如果你之前没用过并且也不会，那么请认真、耐心的看完这篇文章，我保证，你肯定能做到。以下几种方法经IE6、Ie7、Firefox 3.0、Opera 10.60、Chrome 5.0和Safari 5.0等浏览器完美通过(其它非主流浏览器没测试这，不过都是基于IE和FF核心，应该不会出现问题)，接下来我会尽量说的通俗易懂些，但前提是你要懂得Css基出，呵呵，那不费话了，我们开工吧！
方法一：图片实现
Css圆角大的实现大致分为两种，图片实现和纯Css实现，图片实现又分为背景和边框同色和不同色，纯Css双分为线条缩进和边框。我们先来说说图片的背景和边框同色的实现方法，很简单！
一，边框和背景色相同
我们先用PhotoShop或CorelDraw做一张圆角的图片，这里我就用CorelDraw（Ps我不会用），这个图片的宽度是你想要的Div的宽度，通常情况下高度是自适应的，所以我们不用去管它的高度，比如要做一个宽度为380Px的Div，圆角角度的大小由这张图片决定，图片就应该像这样。
这张图片做好之后，我们就可以开始切了（当然你如果不想切，一个整张的图片也可以，但考虑到访问速度，通常我们不这么做），切的时候注意要把圆角部分全部保留，切过之后应该是这个样子。
这是上半部分：
这是下半部分：
现在，我们须要的背景图片都完了，接下来就是Css部分了，先写一个Div，这个Div内应该包括两个子Div，既div_top、div_content，结构应该是这样的。
<div id="mydiv"> <div id="div_top"></div> <div id="div_content"></div> </div>
最外面的mydiv是包括div_top、div_content的，div_top是没有实际内容的，它的作用是放圆角背景图片的，而真正的内容是在div_content里的，Css代码应该是这样子的。
#mydiv{width:380px; bckground:#FFFFFF; margin:0px; padding:0px;}
#div_top{width:380px; height:10px; background:url(div_top.gif) no-repeat left bottom; border:1px solid blue}
#div_content{width:380px; background:url(div_bottom.gif) no-repeat left bottom; padding-bottom:10px; border:1px solid red;}
效果：
现在加上边框来看就一目了然了，已经可以看出只须要再给div_content填充一个和背景图片一样的颜色就行了，我们用取色器选取图片颜色并填充为div_content背景。
#mydiv{width:380px; bckground:#FFFFFF; margin:0px; padding:0px;}
#div_top{width:380px; height:10px; background:url(div_top.gif) no-repeat left bottom; border:0px solid blue}
#div_content{width:380px; background:#33CC66 url(div_bottom.gif) no-repeat left bottom; padding-bottom:10px; border:0px solid red;}
现在，我们的圆解Div就已做好了。
二 ，边框和背景色不同
同上，做一个宽度为380Px的Div，圆角角度的大小由这张图片决定，图片就应该像这样。
为了看的清楚，我加上了灰色的背景。
这只是圆角Div的左上角和右上角，我们再用软件把它旋转180度做为下左下角和右下角，旋转之后应该像这样。
我们须要先写一个Div，这个Div内应该包括三个子Div，既div_top、div_content、div_bottom，结构应该是这样的。
<div id="mydiv"> <div id="div_top"></div> <div id="div_content"></div> <div id="div_bottom"></div> </div>
Css样试应该是这样子的。
#mydiv,#div_top,#div_content,#div_bottom{width:380px; margin:0px; padding:0px;}
#div_top{height:10px; border:1px solid blue; margin:0px;}
#div_content{border:1px solid green; margin:0px;}
#div_bottom{height:10px; border:1px solid red; margin:0px;}
我们给mydiv、div_top、div_content和div_bottom设了一个同样的属性值，就是width=380px让它们的宽度都为380象素，div_top和div_bottom的高度是由我们上面所切的图片的高度而定的，比如，我们上面切的左上角和右上角的图片高度为10象素，这里就可以设为10px，而div_conetnt的高度是自适应的，所以我们不用去管它，我给div_top、div_content和div_bottom分别加上了蓝、绿、红色的边框，并且在div_content里加上了测试内容，目的是为了大家更容易理解，加上样式之后应该是这样的。
我们再把切的图上加上去吧。
给div_top和div_bottom分别设置发我们上面切的图片div_top.gif和div_bottom.gif，考虑到图片的容差，我们让div_top.gif贴着div_top的底部，div_bottom.gif贴着div_bottom的顶部，这样一个圆角的基本雏形已经出来了，代码应该是这个样式了。
#mydiv,#div_top,#div_content,#div_bottom{width:380px; margin:0px; padding:0px;}
#div_top{height:10px; border:0px solid blue; margin:0px; background:url(div_top.gif) no-repeat left bottom;}
#div_content{border:1px solid green; margin:0px;}
#div_bottom{height:10px; border:0px solid red; margin:0px; background:url(div_bottom.gif) no-repeat left top}
接下来我们可以设置div_content的样式了，我们给div_content的左边框和右边框设置和div_bottom.gif上面一样的边框颜色，背景也设置为div_bottom.gif一样的背景颜色，可以用取色器去取颜色，代码应该是这样子的。
#mydiv,#div_top,#div_content,#div_bottom{width:380px; margin:0px; padding:0px;}
#div_top{height:10px; border:0px solid blue; margin:0px; background:url(div_top.gif) no-repeat left bottom;}
#div_content{border-left:1px solid #84E69C; border-right:1px solid #84E69C; background:#CCFFCC; margin:0px; overflow:hidden;}
#div_bottom{height:10px; border:0px solid red; margin:0px; background:url(div_bottom.gif) no-repeat left top}
现在，我们的圆角div已经做好了，并且，这个div的高度会随着肉容自适应的。
方法二：纯CSS实现圆角
一，线条两端缩进，这个是纯Css圆角的结构，当然，里面的div1、div2、div3、div5也可以用任何可以实现1像素线条的标签：
<div class="mydiv"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div5"></div> <div>这里是内容部分</div> <div class="div5"></div> <div class="div3"></div> <div class="div2"></div> <div class="div1"></div> </div>
这种方法是分别用上下两边的四条高为1px的线实现的，其基本思想是，最上面的一条线两端缩进5px，第二条缩进3px,第三条缩进2px以此类推，第四缩进1px，这样就会形成圆角效果，继续往下看，大家就会明白。
比如我们要做一个宽度为380px的圆解div，给这些代码开始加上样式，为了大家更容易理解，我把每根线条都用不同的颜色。
.mydiv{width:380px; border:1px solid #CCCCCC;}
.div1{height:1px; display:block; overflow:hidden; background:red; margin:0px 5px;}
.div2{height:1px; display:block; overflow:hidden; background:yellow; margin:0px 3px;}
.div3{height:1px; display:block; overflow:hidden; background:green; margin:0px 2px;}
.div5{height:1px; display:block; overflow:hidden; background:blue; margin:0px 1px;}
.content{border-left:1px solid #FF00FF; border-right:1px solid #FF00FF; line-height:30px;}
为了让大家看得更清楚，这是我放大后的效果，我们先给最外面的mydiv声明一个class类（灰色边框就是），设置它的宽度为380px，mydiv内的div1、div2、div3和div4就分别是红、黄、绿、蓝四条线，并且让它们分别两边缩进5px、3px、2px、1px，这张截图是mydiv的左边，右边和左边同样缩进。
上面的代码是为了让大家好理解而写的，在实际开发过程中就不用这么写的，我们要尽量简化代码，并且为了方便修改边框颜色和背景颜色，接下来我把这个代码修改成：
.mydiv{width:380px;}
.div1,.div2,.div3,.div5{height:1px; font-size:1px; overflow:hidden; display:block;}
.div1{margin:0px 5px;}
.div2{margin:0px 3px; border-right:2px solid; border-left:2px solid;}
.div3{margin:0px 2px; border-right:1px solid; border-left:1px solid;}
.div5{margin:0px 1px; border-right:1px solid; border-left:1px solid; height:2px;}
.content{border-right:1px solid; border-left:1px solid; line-height:30px; overflow:hidden;}
/*在这里定义边框样式*/
.div2,.div3,.div5,.content{border-color:#84E69C;}
.div1{background:#84E69C;}
/*在这里定义背景样式*/
.div2,.div3,.div5,.content{background:#CCFFCC;}
我们把div2的边框宽度设为2px和把div5的的高度设为2px的目底是为了圆角看起来更圆滑、自然，这种圆角方案现在应用很广泛，不相的话，包括IE浏览器的左右上角都彩用这种解决方法。
要修改这个div的宽度，只须要修改mydiv的width属性就可以，背景和边框颜色修改起来也很方便。
这样我们的纯CSS实现圆角就做出来了，并且它能自适高度，宽度修改起来也很方便。
我们再来放大后看看：
从这个角度看，能很清晰的看出为什么要把div2的border-left和border-right设为2px、div5的height设为2px了吧。。。呵呵。
二，边框圆角，这种方法是我不经意间发现的，严格来说这种不属于圆角，不过实现之后发现这种方法挺实用，这是利用了Css中的border特性，因为在CSS中border的宽度如果设为1px以是的话，把其它三条边设为0px，这条边的两端就会出现斜角，来看一下吧。
如图，我们来做一个div，把它的边框宽度设为5px，颜色设为灰色，并且把它的下边框设为红色，就能看出来了，根据这样的特性，我们就可以做出一个准圆角div来，效果还不错先来看看代码吧。
<div> <div></div> <div> <p>CSS圆角技术</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> </div> <div></div> </div>
其CSS样试为：
.mydiv{width:380px;}
.div1{height:0px; border:5px solid #FFFFFF; border-bottom-color:red; overflow:hidden; margin:0px auto;}
.content{border:1px solid #0099FF; background:#0099FF; margin:0px auto;}
.div3{height:0px; border:5px solid #FFFFFF; border-top-colo:red; overflow:hidden; margin:0px auto;}
效果：
这个角度的大小是由上同两个DIV的边框宽度（即红色部分）决定的，我们再来看看成品吧。
Css做圆角的方法决大部分的思路就是以上这几种方法，举一反三，根据这几种方法还能衍生出很多类似的方法。。。
做了一天，累死了，好，我们收工吧。
原文：http://www.thenbsp.com/archives/6.html
作者: thenbsp 发表于 2011-07-12 15:51 原文链接
最新新闻：
· 腾讯：娶金山易 取江山难(2011-07-13 08:40)
· Citrix 2亿多美元收购Cloud.com(2011-07-13 08:34)
· 艺电7.5亿美元收购《植物大战僵尸》开发商(2011-07-13 08:33)
· HTC无视苹果侵权起诉(2011-07-13 08:32)
· Android官方电子市场客户端大变脸(2011-07-13 08:29)
相关 [css] 推荐：
用 Compass 寫 CSS
- Jay - Blog.XDite.net最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.
CSS 入门
- - 博客 - 伯乐在线级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素. ●XHTML：可扩展 HTML. 对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据.
css 圆角
- - CSDN博客推荐文章作者：kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读：6 评论：0 查看评论.
CSS架构
- - 博客 - 伯乐在线英文原文： CSS Architecture，编译： CSDN-张红月. Philip Walton 在AppFolio担任前端工程师，他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践，并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现.
CSS总结
- - CSDN博客Web前端推荐文章 接触过一段CSS，为简单理解，将CSS说成两步，一步是你做个“记号”，另一步是根据记号设置样式. 网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词（选择器），而根据记号设置样式呢，就是按图索骥根据记号设置标识的那部分内容的样式. 这段时间练习的每个CSS小例子，或是用id做记号，或是用name，或是用class，只有有了这些所谓的记号，CSS设定的样式才有用，.
CSS基础
- - CSDN博客Web前端推荐文章1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器：标签选择器，ID选择器，类选择器，通用选择器. 通用选择器：*{css代码}. 通用选择器作用：对整个网页中所有HTML标签进行样式定义. 常见用法：定义*{margin:0;padding:0}通用样式，并置于CSS文件最顶端，用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.
CSS命名规范
- - BlogJava-首页技术区网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性. 容器: container 页头：header 内容：content/container. 页面主体：main 页尾：footer 导航：nav . 侧栏：sidebar 栏目：column 左右中：leftright center .
css基础入门
- - CSDN博客推荐文章css是Cascading Style Sheets的缩写，是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言，用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离，使得网页设计更加明了、简洁. Css可以精确控制网页布局，如行间距、字间距、段落缩进和图片定位等.
CSS样式重置
- - CSDN博客Web前端推荐文章为了让页面在各不同浏览器之间显示效果一致，CSS样式清除和重置是前端开发必需要做的事情，结合前车之鉴，整理了份CSS重置样式代码供参考. 作者：bbirdsky 发表于2013-5-19 21:24:58 原文链接. 阅读：141 评论：0 查看评论.