2012 3 22 02:02 PM 5798 次查看
分类：CSS 标签：CSS
在CSS3中主要有3种实现动画的方式：transform、transition和animation。其中，transform是改变形状，例如伸缩和翻转等（本站上方的那几个图标就用了这个属性来翻转）；transition是实现渐变效果，将原本只能瞬间完成的变换，在一个指定的时间段里慢慢展现出来（那几个图标翻转的渐变过程就是用这个属性来设置的）；而animation则是最为强大的动画功能，通过定义关键帧和时间，浏览器可以自动完成关键帧之间的演变（本站曾用过的koi皮肤中，那个不停翻滚的feed图标就是用这个属性来实现的）。
昨天在V2EX看到有人用CSS3特效做页面菜单，其实主要就是用transition这个属性。于是想着本站右上角那个“热门文章”的菜单是否也能弄成动画效果呢，便也尝试了一番，做出了目前这种效果。
不过拿它来讲解也蛮复杂的，于是还是从入门的开始，先做个不依赖JavaScript的没有动画效果的下拉菜单。
2011 1 17 10:32 PM 2109 次查看
分类：CSS 标签：CSS
曾经有网友指出我的代码高亮插件有问题，一行过长时，Firefox下会超出容器。当时我想也没想，就告诉他这是Firefox的遗留问题。
不过今天突然想起Firefox也支持word-wrap:break-word了，那么必然还有其他的原因。
2010 12 1 10:52 PM 4784 次查看
分类：CSS 标签：CSS
2010 11 4 08:13 PM 1913 次查看
分类：CSS 标签：CSS, Google Chrome
很早以前Chrome就强制把小于12px的字显示为12px了，这导致要做一些特殊效果时很不给力，前些天在别人的CSS reset里看到了这一行，就是用于解决这个问题的：
-webkit-text-size-adjust:none;
2010 10 14 12:36 PM 1806 次查看
分类：CSS 标签：CSS, HTML
今天在测试博客的主题时，发现Chrome下显示得好好的，但是Firefox 3.5下却一团糟，让我非常无语。当初采用HTML 5，本来就不想支持IE的，没想到连Firefox都败下阵来，这也太囧了吧。
检查了下CSS后，发现那些新的HTML元素居然都是display: inline的，于是加了这行代码，问题解决：
header, footer, nav, section, article {display:block;}
顺便测试了一下Opera 10.5，发现也存在这个问题，看来要采用HTML 5，别忘了使用HTML 5的CSS Reset。
2010 2 4 04:10 PM 2098 次查看
分类：CSS 标签：CSS
在webkit官网看到的，浏览器必须支持CSS3，例如Chrome。
2010 1 4 01:34 PM 2464 次查看
分类：CSS 标签：CSS
2009 11 21 09:27 PM 1883 次查看
分类：CSS 标签：CSS
刚才在测试CSS选择器时发现一个奇怪的问题，连IE浏览器（我只测试了IE 6和IE 7）都计算错了，不知道大家能不能得出正确答案：
2009 11 21 05:33 PM 6542 次查看
分类：CSS 标签：CSS
在页面开发中最常用的2种显示类型就是inline和block了，然而它们都有或多或少的限制，所以偶尔还需要用到inline-block。（此外还有none等10多种，但是此处不讨论。）
2009 11 19 04:12 PM 2797 次查看
分类：CSS 标签：CSS
今天在写网页时又遇到换行的问题了，之前是用JavaScript解决的，不过我觉得太麻烦，想用纯CSS来做，于是就去Google了一下，很快就发现了word-break。
订阅
