《精通CSS》读书笔记（四）

续上篇。

下面来看一下阴影。它可以用类似圆角border的方式达成。

1. 简单的CSS阴影和Clagnut阴影

实现：在外层wrapper上将阴影图设为背景。元素本身通过margin或者相对定位做向左上方的偏移（以展现右下方向的阴影）。

限制：
* 阴影元素需要一个外层的wrapper元素。

2. 模糊阴影

实现：添加两层container，分别应用阴影图像和蒙板图像。

限制：
* 需要两个外层元素
* 外层背景色是固定的（与蒙板颜色一致）。洋葱皮阴影无此问题。

注意，蒙板需要png的alpha透明特性，但是IE6不支持。书中给出了使用AlphaImageLoader的filter方式，但是问题在于，在IE中与其这样，不如直接在元素上使用DropShadow或Shadow的filter。

3. 洋葱皮阴影

实现：添加两层container，分别应用两个阴影末尾图。

限制：
* 需要两个外层元素
* 外层背景色是固定的，但稍作改进可以避免这一限制。

总的来说，上述的阴影实现，都不是很好的方法，最好还是借助脚本。

最后是图像替换。

关于图像替换，除了本书作者所说的screen reader问题外，另一个问题是，在许多浏览器上，图像不会跟文本一起缩放。所以我的观点是尽量避免使用图像替换。本书作者提出的“公司品牌策略要求特定字体”的例子，我认为不足为证。如果真的需要这样强的视觉强制要求，也肯定不以字体为限，最好直接使用flash。

此外，display:none或visibility:hidden（译本有疏漏）会造成screen reader失效，这其实很大一部分是screen reader本身的问题。因为本身CSS可以只针对media=screen指定图像替换样式。但是许多screen reader忽视了CSS规范（多数是基于IE的）。

所以目前最可靠的图像替换法，仍是利用脚本的，如本书中的IFR和sIFR。

另，在XHTML2中，不需要专门的图像替换法。因为所有元素上都支持src属性。如果src指向的资源可用，就会被替换成该资源的内容（如视频、图像等），否则会使用元素内部的内容。

待续...

评论

1 楼 JohnLee 2007-08-27  

咋觉得楼主在做平面设计，汗