C S S不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画，里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘，IE8 都不行，在这个 IE 特别是 IE6 居高不下的国度怎么办，由它去吧。

兼容性

据 MDC 的文档，支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。

阴影文字和发光文字

一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

浮雕文字

浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。

text-shadow: 0 1px 0 #eee; 凹进效果

text-shadow: 0 -1px 0 #123; 凹进效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/

多重阴影

在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

鼠标悬停切换

让鼠标悬停的时候改变状态是个不错的主意，有很强的互动的感觉。阅读器中可能看不到效果。另外，在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影，这是另一个应用于块模型的阴影属性，写法和 text-shadow 一样，但需要写两条：-moz-box-shadow 和 -webkit-box-shadow.

把鼠标放到按钮上切换阴影

半透明阴影颜色

有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。

text-shadow: 1px 2px 3px #888; 杯具了

这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

动态阴影

搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程，仅 Chrome, Safari 等 WebKit 浏览器有效。

把鼠标放到文字上，阴影在 0.5 秒内聚拢

上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：

a img {
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-out;
}
 
a:hover img {
    opacity: 1;
    -moz-transform: scale(1.05) rotate(2deg);
    -webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 class="logo" 的图片，则将选择器改为：

a img.logo {...}
a:hover img.logo {...}

如果要求应用于 id="footer" 的 div 下所有图片，则将选择器改为：

#footer a img {...}
#footer a:hover img {...}

到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);

上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):

transition: 过程动画设定

兼容浏览器: Chrome 2.0, Safari 3.1

-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线，可以有如下赋值：

以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大，而且上面的 transform 是可以多重叠加的，配合 transition, 能做些什么大家想象一下吧！

opacity: 不透明度

兼容浏览器: 除了 IE

这是一个较为广泛支持的属性，前面早已没有了私有前缀(-moz, -webkit). 使用也很简单，让正常状态的图片稍微透明显示，鼠标悬停的时候恢复不透明，更加醒目。它同样可以在时间轴上受 transition 控制，试试看这个示例。

text-shadow: 文字阴影

兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1

text-shadow: 0px 1px 3px black;

以上赋值分别代表 X轴偏移，Y轴偏移，阴影扩散尺寸，颜色。应用到按钮、标题等处有很好的浮雕效果，同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。

结语

• 限于篇幅，本文示例所用的 CSS 不明文列出，有兴趣可以查看页面源代码，就嵌在正文中。
• 目前 CSS3 还在草案阶段，很多属性还有私有属性前缀，能兼容新属性的浏览器在用户比例上也还是少数。话说回来，谁指望 IE Trident? 屁股都要笑掉。
• Gecko 真的已经落后 WebKit 好多了，CSS, JS, 而且还没算上 WebKit 在 iPhone, Android 等移动平台的成就。Gecko 在这方面基本还是零吧。

Safari 经过一番折腾已经升级成为我的一号浏览器，尽管很怀念 Firefox 的 Awesome Bar, 可我还是叛变了

选择 Safari 的原因基本上都是视觉上的，我非常喜欢 Safari 4 的置顶标签栏， Chrome 也采用了这样的设计，区别在于 Chrome 的分页标签是固定宽度的，拖动标签调整单个标签，拖动标签以外视为拖动整个窗口。Safari 的标签则是充满标签栏的，拖动标签视为拖动整个窗口，要拖动单个标签，把鼠标放上去会出现一个拖动手柄。也有人并不喜欢这个样子，要改回 Safari 3 的标签栏样式也是可以的。

此外，Safari 有一些继承自 Mac 系统界面的特点，下图左边是 Firefox 网页中的下拉菜单，中间是 Safari, 下拉菜单中的当前条目被置于地平线上，只需要最少的鼠标移动就能选择到上一条或者下一条。右图则是 Safari 下载中的文件图标，能直观地从 Dock 堆栈中看到下载进度，下载完成时还会在 Dock 中跳一下。这些都是别的浏览器做不到的，不是亲娘生的就是差一截啊

折腾 Safari 的插件

扩展在 Safari 下叫做插件了，很抱歉这些东西没有办法随着 Safari 移植到 Windows 下，至少目前如此。首先安装 SIMBL, 然后将插件文件 (.bundle) 扔到插件目录就可以了。下面是两个我在用的插件：

GreaseKit

就是 Firefox 下大名鼎鼎的 GreaseMonkey 在 WebKit 下的兄弟了。比 GreaseMonkey 简陋，能加载大部分脚本，也有一些不能用。

Glims

这是一个增强标签、搜索、书签、全屏的全能插件，特色功能有：

• 在新标签中打开链接。不知道苹果怎么想的，这么基础的功能还要用插件或者终端命令来实现，实在不像话。
• 真正的最大化和全屏，全屏下可以只有滚动条，页面充满屏幕。
• 启动时恢复上次的所有标签。
• 恢复标签 (⌘+z) 跳到左侧标签 (,) 右侧标签 (.) 这三个设置不够科学，经常和网页上的输入区域冲突。
• 关闭一个标签之后，跳回临近标签还是跳回上一个激活过的标签，按个人喜好选择，我一般用前者。
• 新建标签的位置，邻近右边还是最右边？我习惯后者。
• 下载完成后自动关闭下载窗口。
• 自定义搜索引擎，设置搜索关键字，搜索提示和搜索预览。不光在键入的时候提示，它甚至可以将搜索结果的前几条在您按回车之前就显示出来。自定义搜索引擎的详细指导请参考 此文。
  

另外，我介绍过修改网站 CSS 让输入框激活时高亮 的办法，其实在 Safari 和 Chrome 中比原生的输入框高亮要丑，我想了一下，只需要将 outline 改成 -moz-outline 就只对 Firefox 生效了，在 WebKit 浏览器中恢复原生的输入框高亮。IE 反正也不支持，无所谓，Opera 嘛，就算喽。

受 GSeeker 的邀请，分享 Chrome 的访问情况，而老肥博客也已经很久没有谈过浏览器的事儿了，就这个机会聊聊这个长盛不衰的话题——浏览器份额。

保持浏览器更新，是和保持操作系统更新同样重要的事，安全性 是最重要的一个原因。所以我认为，Maxthon, TT 等以 IE6 为核心的浏览器的红火其实是互联网的倒退，即使您不愿意尝试别的浏览器，那么升级一下 IE, 使用 IE7 或者 IE8 也是一个更好的选择，它们在安全性和 遵从标准 方面要好得多。

从我的博客最近一个月的统计来看，能保持浏览器最新的用户，IE 是 37% (IE7+), Firefox 是 83% (3.0+), Opera 是 74% (9.5+), 区别还是挺大的，而且 IE7 的发布时间远早于 Firefox 3 和 Opera 9.5, 就是因为一部分人偏爱 IE6 核心的浏览器，一部分人对使用什么浏览器不关心。

下面比较一下各个浏览器之间的关系。我的博客访问量不高，统计结果偶然性比较大，而且会受一些别的因素影响，比如我的 Firefox 话题很多，Firefox 用户比例自然就高一些，访问量在有新文章的日子总会高一些，周末又会低一些。

Chrome 用户从 9月3日 到 9月6日 的比例分别是：5.01%, 10.37%, 8.82%, 6.09%. 这基本上符合“尝鲜过后回落趋于稳定”的模型。同样，我这里的G粉人数也是相当的高，数据不能代表宏观统计。

阿禅 认为 Chrome 用户更多地来自于原 Firefox 用户，在老肥这里是不是这样的呢？我做了一个 份额曲线图:

即使扣除尝鲜用户的水分，Google Chrome 的实际用户数量也在发布当天就超过了 Opera. 我希望 Chrome 能够持续更新，给大家带来更多的惊喜，让更多的用户把它作为首选浏览器

• Google 甚至没有给它起一个中文名字，中文化也没有彻底，那个类似 Firebug 的网页调试器是英文的。但我看到了一个细节：双击文本一般是选择一个英文单词，或者两个标点之间的中文短句，三击是选择段落。而 Chrome 里面呢，非常独特，双击竟然可以选择中文词语。这应该是 Google 在搜索引擎上积累的中文识别技术，但我不清楚这个判断是基于什么的，本地汉语词库不太可能，在线的好像也讲不通。
• 没有 扩展 可以用，相信是阻碍 Firefox 用户的门槛，就像我。除了这点，我非常欣赏 Chrome, 特别是它的 UI 设计：看了 Chrome, 才知道什么是尽量扩大浏览区域的面积。标题栏、菜单栏、状态栏通通去掉，而鼠标悬停的链接地址还是会在左下角显示，但却不占地方。这也是我的 Firefox 自定义之后的状态，只是我用 Fission 把链接地址的显示放到地址栏里面去了。
• 地址栏会高亮出当前地址的域名部分，这可以一定程度上帮助用户免受钓鱼网站的欺骗，而且 Chrome 自身的反钓鱼功能也非常强大。
• 渲染引擎是 WebKit, 可以看到渲染效果和 Safari 很像，比较直观的有：输入框激活后有发亮边框，多行输入框可以按住右下角调整大小。
• 每个标签独享一个进程，是优点不是缺点。Windows 任务管理器里面看着那么多，但和那些只有一个汇总进程的程序相比，实际上没有消耗更多的资源，而且 Firefox 以前被诟病的内存泄露问题，就是关闭标签之后占用的内存没有被完全回收所致，Chrome 的做法在这点上应该会更高效。

• 内部链接

  内部链接一般是推荐一下读者可能会感兴趣的以前的文章，可以增强关联性。它可以一定程度上打击抄袭，虽然有些人会把链接抹掉，但总比没有的好。我的 favicon 设计系列 被很多人转载过，其中不乏故意隐匿出处的人，但由于插图多，他们没工夫挨个删，里面的内部链接也跟着幸存下来了。还有一篇 如何为 blog 建立一个高效的标签系统，我故意在文中留下了一个纯文本的链接（当然也是为了展示 URL 的需要），它也在抄袭者手中幸存了。在这样一个大环境里，对付抄袭没有什么特别有效的办法，但是也不要老是在文中提自己的名字——照顾一下正经读者的感受吧。

• 外部链接

  外部链接就是方便读者点击相关内容的，很重要。最好给链接加上 title 属性（鼠标放上去显示的文字），描述一下这是一个什么内容，比如写上对方文章的标题。这样读者可以自己决定看不看，有个预览。

• 是否在新标签中打开

  在本页打开的链接，读者可以自行决定是否新标签，而在新标签打开的链接，基本上是强制性的。有个现象，就是国内网站的新标签链接远远多于国外网站，从门户到论坛，大家已经习惯被剥夺选择权了。这个很难一刀切，在新标签打开吧，容易招致反感；在本页打开吧，读者可能就忘了回来，况且新标签是有实际作用的，当读者需要新老都保留的时候。我这里是内部链接本页打开，外部链接新标签。当然不是说就推荐您这么做，但我的个人忠告是内部链接最好不要新标签，内部和外部是两个系统，我不希望我的标签栏被一个网站占据。

• 给读者一个新标签提示

  更进一步的说，一个链接是否新标签并不直观，给读者选择权的同时，是否能够像链接的 title 那样，有个预览和心理准备？这里我推荐一个 WordPress 插件 External Links, 它可以给外部链接自动加上这样的一个弹出小图标。如果您不是 WordPress, 或者像我一样希望不通过插件就实现这样的效果，也可以通过 CSS, 给链接的 a 标签加上 class="external", 然后添加 CSS 描述：

  a.external {
  background: url(...) no-repeat center right;
  padding-right: 13px;
}

  对以前的文章，我导出 xml, 搜索替换 target="_blank" 为 target="_blank" class="external" 再导入就搞定了。类似的，我还做了一个 下载图标。

• 已访问过的链接的区分

  这是一个看上去不显眼，实际上挺重要的东西，读者可以从链接的外观区分是否访问过，提高阅读效率。通常的办法有：改变颜色，加下划线、下点线等。我的代码：

  a, a:link {
  color: #bb6f02;
  text-decoration: none;
}
a:visited {
  text-decoration: underline;
}
a:hover, a:active {
  text-decoration: underline;
  color: #e58802;
}

  链接没有下划线，鼠标放上去有，访问过的链接也有。

差不多说完了，希望能对您有所帮助。祝天下所有小盆友们，和童心未泯的老盆友们节日快乐

我很高兴有位网友把我的文章转回了 日月光华 Software 版，结果到那边又是一片争论。非常感谢 gggggdxn 同学认真地发现了我的相关文章：常见网页浏览器的Acid2测试结果 中的错误，Konqueror 浏览器并不能完美通过 Acid2 测试，下面是他发给我的截图，测试平台为 Ubuntu Feisty, KDE 3.5.6, Konqueror 3.5.6:

不少人认为，IE 的兼容性是最好的

这点我可以肯定地说，IE 其实是做得最差的，您可以看看 网页标准化组织的浏览器测试 Acid2。但在不明就里的人看上去，反倒像是最好的：很多网页特别是中文网页，只有 IE 下不错乱；经常看到“请用 IE 浏览”的提示；还有网银，基本上非 IE 不行。为什么？

编写网页一定要遵循标准代码，这样大家都省事。微软的程序员并非没有实力来完善 IE，而是微软一直都有自己的小算盘，用不和别家兼容的手段来保持市场占有率，根本就不打算顺服于 W3C。这也倒算了，IE6, IE7 自家都打架，让人十分无语。说白了，IE 的市场占有率摆在那里（“光荣”继承了 Windows 的市场占有率），哪家网站要放弃 IE 就是放弃 70% 以上的用户，有 Open Addict 那样的勇气 的又有几家呢。我一直很佩服 Gmail 这样的开发团队，能把非常非常复杂的，带有各种特效、脚本的 Gmail 写成主流浏览器基本兼容的样子。如果您仔细去看 Gmail 的代码会发现，无数样式都是“IF IE6, 怎样怎样, ELSE, 怎样怎样”这样精心写就的。可是，具有他们那样的技术实力的开发者，又有多少呢？所以，各种参差不齐的网页遍布网络，许多开发者无奈之下选择了 IE 优先，毕竟用户才是衣食父母。顺带一提，网银常用的 ActiveX 控件其实是一项被微软自己都淘汰了的技术，我一直没搞懂为什么国内网银都跟风一样的上这个。

那是搞技术的人的事，和我没关系

我在花儿那边留言：“个人觉得如果把 IE 这十多年给互联网造成的倒退，给全体编写者、受众造成的精力损耗换算成现金的话，买下十个微软帝国估计还能剩。” 也许您觉得这些和您关系不大，您只是浏览浏览而已，不要给我上纲上线。网页开发者被不标准的浏览器折磨，那是因为他们必须为所有用户的体验考虑。对浏览者来说，遇到兼容性好的网站大家没感觉，兼容性一差，就有砸鼠标砸电脑的冲动了，但别学这位把电脑直接扔出窗外，呵呵。

我应该用什么样的浏览器？

目前在欧洲，Firefox 的占有率已经突破了 27%, 在个别国家甚至达到了 47%。但是 Firefox 也不是完美的浏览器，在上面的测试中 Firefox2 并没有完全通过，测试版 Firefox3 没问题。完全通过 Acid2 测试 的浏览器有 Opera, Safari 等，都是不错的选择。像 Open Addict 那样宣布放弃 IE 用户并不能撼动顽固的微软，但是优秀浏览器市场占有率的不断增加，对微软的压力就非常大了，举个例子：在 2001~2004, 微软几乎没有对 IE6 做什么改进，因为没有别的浏览器能威胁到它，直到 Firefox 开始流行，才考虑用 IE7 反攻，可惜 IE7 在功能上的提升并不能掩盖它在代码标准化上的一贯顽固。

最后送大家一张来自 Mozilla Developer Center 的墙纸，这真是开发者的心声啊。

大概意思就是有人用虚假招聘广告来欺骗同济校园网上的学生点击 Firefox 推介广告，而这么一个事情居然被 cb 的编辑冠以“史上最牛的”。这件事从欺骗者，cb的编辑 ，到部分评论网友，都对 Adsense 和 Firefox 的这个推介广告有非常幼稚的想法，但是偏见的存在必然有其根源，我们也能从中看出些东西。

首先，欺骗者完全不懂 Adsense 是怎么操作的，以及 Google 的城府有多么深。那么明显的欺诱点击，又集中在一个时间，和同济学生这样一个人群，如果稍微有点统计学的常识就会知道，访问量和点击量在宏观上来看是一个非常了然的事情，而 Google 又是统计数据的绝对主宰者。我一直都认为 Adsense 其实是一个不平等的条约，欺骗者做出来的恶果全部由诚实的站长们承担，广告投放者 Adwords 用户同样也是盈亏自负，而 Google 这一方却同时扮演着规则制订者和价格制订者的角色，零风险地继续书写着暴富的传奇。

然后说说 Firefox。
本人是一个 Firefox 的忠实用户，而且喜欢研究和修改各种扩展。有一次一个朋友想转向 Firefox，问我用不用“带有 Google 工具栏的 Firefox”的？我说我不用，并且告诉她这样的链接在用户下载、安装、运行之后，站长的收益是 1 美金。她说：“这么黑啊！”其实一点也不黑，而且这个金额太低了，应该更高一点。因为 Google 从中赚到的更多，多得不可想象，而它只赏给站长 1 美金。

一切收入的源头都是广告。Firefox 是免费的，而且没有广告。但是如果你用了它默认的搜索框，又点击了结果中的广告，那么广告收益的 80% 归 Mozilla。这几乎支撑了 Firefox 开发团队所有的资金和推广成本。虽然 Google 只拿 20%，但是它被设为 Firefox 的默认搜索，这个设置对市场的占有力量是巨大的，带来的用户和流量更是巨大的。现在知道 Google 为什么那么卖力地推广 Firefox 了吧？

然而，嚼一口甘蔗的甜头都在前面，后面就是渣了。现在的网民，看到长得像广告横幅的都不点，聪明得很，更别说是 "http://pagead2.googlesyndica..." 这样的链接！现在已经不是几年前了。站长们的收益越来越少，网民对广告越来越视而不见。

我看到 cb 那篇文章中有这样的评论： “只因火狐的不要脸 所以我坚决不用它!!”

看，这就是过头的广告产生的抵触情绪。还有些 Firefox 的推介广告的确夸张得离谱，好像 IE 就是个晚期肿瘤，必须马上切除似的。而且由于不是每个人都了解，所以这种愤恨还会撒到 Firefox 用户头上，比如，同济网那个欺骗者被认为是“火狐推广者”。我无意去批驳谁，也不可能去对每个人说明到底是怎么回事，只想在这里说：

• 优秀的浏览器很多，爱谁用谁，况且对很多人来说，网络并不重要，只是随便用用，什么功能啊安全啊，都不重要。比如 IE，最大优点是方便，哪儿都有。
• 如果您和我一样是 Firefox 爱好者，我希望您多发布相关经验文章，或者告诉好友它的好处。用广告的形式不是说不好，而是效果不一定好。
• 更进一步，我们不是需要推广 Firefox，而是要推广代码标准化。如果每个浏览器都支持标准，乱七八糟的网页就会逐渐消失。方便网页编写者，更方便所有人：）

Acid2是由Web Standards Project所设计和发起的一项关于css标准支持以及各种html渲染的标准化测试，旨在促使各家浏览器推进网页标准化。你可以用你的浏览器访问一个由复杂的html/css语句所编写的考核页面，该页面应该呈现一个黄颜色的笑脸：

目前能通过测试的浏览器(内核名称)仅有: Safari(WebKit) / Opera(Presto) / Konqueror(KHTML)

Firefox 仍未能通过测试，据说测试中的3.0能通过。下图是Firefox 2.0.0.3(Gecko)的答卷：

我们再看看 IE7 和 IE6... 天哪怎一个惨字能够形容...

Internet Explorer 7.0 (Trident)

Internet Explorer 6.0 (Trident)