我们知道，如果要一个区块水平居中，最好的办法是设置其width，然后使用margin左右为auto，但是对于一个不确定宽度的区块，我们也想要水平居中该怎么办，其实可以设置其display为table，然后设置左右的margin为auto，不过ie6,7不支持display: table;除此之外我们还可以用css3的box-align和box-pack来实现，当然那更不兼容了

.element{
  display: table;
  margin: 0 auto;
}

因为不兼容，我们得想一个兼容的办法啊，那就是直接用table来构造喽

这个css reset代码是我自己在参考前人的基础上，并根据个人在多个实际项目中实战得出来的，在尊重标签本身用途的同时，又给予一些基本的实际需求。本reset只涉及常见的基本元素，以修正兼容为原则

我们想要想给table设置圆角效果，第一必须要设置其border-spacing为0，然后第二点ie7以下border-collapse默认为separate，我们需要设置为collapse以使border合并（当然ie7是没有圆角效果的了，这个跟圆角无关呵呵）

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    border-radius: 5px;
}

在设置border-spacing为0后，我们还需要对table的四个角上的th或者td分别设置对应角的border-radius

th为第一行时的圆角

表单元素中的input类型为text和submit所用的盒子模型不是一样，现在这个问题可以用css3来解决，submit所用的盒子模型是border-box，而text所用的盒子模型是content-box。现在我们可以通过css3设置它们两个为同一个盒子模型，其语法为：

box-sizing: content-box | padding-box | border-box;

这样我们就可以设置submit和text都为content-box，那么解析盒子模型的时候就一样了

input[type='text'],input[type='submit']{
	box-sizing:content-box;
}

时间过得真快，转眼来广州已经三月，而在这三月中，我的成长就是这个css solution的问世，其实这个也是受支付宝的sofish启发的。本来我原先是打算写一系列突破之路文章的，所以你们看到了突破之路系列的第一篇，可是中间我忽然改变主意了，于是第二篇死在胎腹中，因为我在想如何去规划才是更好的。

第一：写博客这么久了，其实自己也不想去转载别人的东西，而希望所有的东西都是自己的，可是第一时间有限，第二有些时候一篇文章对自己启发了，于是想其他人也能收获或者自己查看的时候也方便查找，于是这个cssshare里面转载了很多文章，有英文的中文，有css有jquery，总之是五花八门，转载多了竟然超过了原创的了，而自己也懒得去写了，因为很多网上都可以百度得到啊，这是我的悲哀。

第二：我觉得应该写一些东西，而这些东西应该是网上暂时还没有的，也是能给大家一种思想启发的，或者说有一定的总结性，而不是简单的画几笔。于是最初的设计是css突破之路系列，但是写完第一篇之后，我就不想写了。

这里我们将会说到用editplus来编写css，如果你对css的各个属性了如指掌，又想提高下速度，那么本文将正和你意，当然如果你现在对css属性还不太了解，那我建议你等熟悉了之后再来看。

在介绍editplus之前请允许我先推荐一篇快速编写html的编辑器notepad++，关于使用这个编辑器结合它的插件zen-coding大漠已经说了很好了，所以就不用我再来废话了，详见notepad++结合Zen Coding快速编写HTML代码

第一步：为editplus制作自己的css.acp文件

打开editplus的安装文件，我们就会找到类似以acp结尾的文件，那么acp文件是做什么用的呢，它让editplus可以更好的扩展你自己的配置的自动完成文件。

acp文件有两个特点，一个是以#TITLE开头的表示声明是css，js，还是html等的自动完成，一个是以#T开头的表示简写，后面紧跟所表示的全部代码。

firefox7.0开始兼容text-overflow:ellipsis;这样的话，以后的省略号就可以做到浏览器兼容了，代码片段为：

width:200px;/*设置宽度*/
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
overflow: hidden;/*设置超过的隐藏*/

yahoo在线压缩图片：

http://www.smushit.com/ysmush.it/

配色方案

http://www.colorcombos.com/combolibrary.html

http://www.peise.net/palette/

css3@font-face在线字体库及制作

http://www.fontsquirrel.com/fontface

google在线字体

http://www.google.com/webfonts

css3&html5支持情况

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式：

今天主要搜集了一些网页中文字用css3制作的特效，并亲自尝试了一下，现把关键的代码和效果贴出来与同学们一起分享，希望能对大家在平时的制作中有所帮助。废话不说，直接进入效果的制作，感兴趣的同学跟着我的代码制作一次，你肯定会有不少的收获。

Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题，背景色，前景色，阴影色需要采用有一定的亮度对比色，这样效果更佳，请看下面的效果。

.insetText h2{
	color: #f00;
	text-shadow: 1px 1px 0px #212121;
}

效果如下所示：

text-shadow的使用请点这里。