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 秒内聚拢

体验这些服务需要 iPhone, Android 上的 webkit 浏览器，或者在 Firefox, Safari 中 模拟 User Agent. 从 m.google.com 这个入口可以看到如下列表：

下面我简单介绍一下其中的常用的服务，另外有部分服务并没有链接到 web apps, 像 Sync 只是链接到一个提示页面，Earth (iPhone), Voice (Android) 只是链接到应用商店下载。

Gmail

之前 Gmail 为移动浏览器提供了一个地址为 /x/ 的界面，大多数手机浏览器都能访问，而专门为 iPhone, Android 开发的 /s/ 界面具有全新的外观，更快的加载速度，键盘快捷键支持，彩色 标签 支持，以及浏览邮件时的浮动工具栏等特性。目前仅支持英文，但不必为此专门设置语言，只需要直接访问：
https://mail.google.com/mail/s/#tl/Inbox 或者
https://mail.google.com/a/DOMAIN.COM/s/#tl/Inbox
注意，如果使用 Firefox: User Agent Switcher, 下图中的按钮不能正常显示，因为按钮使用了 -webkit-border-image 这样的专属 CSS.

日历 Calendar

日历同样可以通过 Google 帐户或者 Google Apps 帐户访问，同样的新 UI, 完全没有页面加载的快速使用体验。

Talk

Talk 只能从英文界面下访问。Google Talk 不光在电脑浏览器上通过 flash 实现了 web 化，手机上也做得相当不错了，当然 webkit mobile 以外的浏览器估计还是很难跑得动。

文档 Docs

Google 文档在电脑浏览器上已经能有不错的体验，移动版专门为小屏幕上编辑文档在操作上做了一些改进。如果是上网本就完全没有操作上的不便了。

工作表 Tasks

工作表已经从 Gmail 中完全独立出来，良好的 js 支持让它用起来就像是一个系统程序。

纵横 Latitude

Google 和 Apple 妥协的产物，直接访问地址是 http://maps.google.com/maps/m?mode=latitude, 使用体验和手极端安装的 Google Maps 里面完全一致，可以查看好友的详情，管理好友。另外，在 Google Maps 里也可以搜索路线等等。

阅读器 Reader

和 Gmail 类似，移动版的 Google Reader 也有两种，适用普通手机的 /m/ 和适用于 webkit 的 /i/, 也就是说把 https://www.google.com/reader/i/ 加入书签，就可以方便地从手机访问阅读器了，和那些第三方的阅读器应用相比，我还是更偏好 web.

相册 Picasa web

Picasa web 的移动版。撞墙之后很难拿它来分享照片了，不过要访问也不难，iPhone, Android 都是可以改那个什么 ho*** 的嘛。

上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 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 嘛，就算喽。

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)