本文以Google圆角高光高宽自适应按钮为引子，阐述此貌似平常的按钮后面的强大技术，并提供我经过我反复试验的更加优化高效的css实现方法，并对其优点进行分析。然后进一步扩展，探讨Google在css技术应用以及网页产品开发上的思想意识，强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果，更重要的是要传达Google在产品设计在技术运用上所体现的一种思想，传达Google是如何将产品的扩展性预见性运用到极致的，借以希望你我都能从众领悟到一些东西，然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面，希望对您有所帮助。
“CSS相关”目录存档
关于Google圆角高光高宽自适应按钮及其拓展
2009年10月24日，星期六对html与body的一些研究与理解
2009年09月18日，星期五
最近一直构思着写篇关于html标签的文章，虽说之前处理过html标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。
在网上查阅相关资料想整合一下相关的信息，发现深入探讨html，与body的文章很少，只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值，其余都没有什么相关的好文章。
而这里，我要讲述的与上面的交集并不多，主要是讲述一些关于html与body的各种表现，我自己的一些解释，以及处理相关问题的些经验，很多应该是网上很少提及的东西，内容不算深奥，我尽量截图展示，表述清晰，希望对大家能够有所帮助。
鲜为人知的一个解决兼容性问题的利器——小数
2009年09月12日，星期六说到解决兼容性问题，不得不提一下css hack，曾几何时我以会使用几个hack沾沾自喜，后来发现自己真是个vip级别的蠢蛋，会用几个hack只是中级阶段，真正厉害的人要以没有hack同样可以实现复杂页面的兼容性，这才叫厉害。
这里将介绍一个很有趣的您应该没有见过的解决某些兼容性问题的神奇的一招——使用小数值。小数值像素在不同浏览器下的解析是有差异的，但是这种差异一旦用到点子上，乖乖，可以反而用来解决兼容性问题。正所谓一物降一物啊。
本文将由浅到浅，就是很浅显的讲解这个平时很不受注意的现象与方法。提供实例页面，希望能对您有所帮助
搜狐白社会似iphone短信对话框效果的优化
2009年09月10日，星期四搜狐有个白社会，今年六七月份露出水面的。其首页css我是从头到尾看了一遍，学了些东西，也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框，有些形似iphone里面的可爱的短信对话框。
这个对话框效果是不错的，能支持高度上限500像素的文字内容，宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后，发现要实现这样的效果，这代码，至少是这图片肯定是优化不够的。而本文将对比其原来的方法，提供更加大小优化的图片和对应的没有兼容性问题的css代码，看如何将css发挥到机制实现图片背景的优化。
文章主体将简要展示对原图片做如何的处理，展示在各个浏览器下的兼容性表现，以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助！
大小不固定的图片、多行文字的水平垂直居中
2009年08月28日，星期五想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。
css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。一起来一睹为快吧！
复选框单选框与文字对齐问题的研究与解决
2009年08月27日，星期四目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了，因为平时对这个问题注意的比较多，也经常做些测试，对这个问题还是有一定的了解，也总结了不少自己的解决方法。今天我就写下来，供交流与参考。
尤其是第三和第五个方法，我是比较推荐使用的，其他方法也是很不错的，对于理解css，拓宽思路还是有些帮助的。
css margin的相关属性，问题及应用
2009年08月25日，星期二margin为css中非常常用的一个属性，其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述，包括其属性，使用过程中会遇到的问题，以及一些高级应用等。
其中属性将着重分享自己记margin各个参数个数位置含义的方法；
margin常见问题部分将讨论margin双倍边距形成的条件以及推荐的解决方法，讨论margin重叠的问题，简单叙述margin不起作用的一些情况；
margin负值的相关应用将讨论页面背景定位的问题，宽度自适应布局，选项卡中的应用，文字与图片对齐等问题。
我的应用
我的应用