calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog，希望对大家有所帮助。

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。

这个DEMO效果是使用了几个CSS3新特性制作的，其主要由CSS3的filter特性，但这种特性到目前为止仅有webkit内核的浏览器支持，另外使用了CSS3的选择器，伪类选择器中的:nth-child()和:not()选择器的支持。同时采用inline-block布局。换句简单的话说，这个demo中使用inline-block布局，使用CSS3的filter和伪类结构选择器制作的特效。希望对大家有所帮助