软件开发培训班 >> 编程开发 >> CSS


CSS阴影详解

设计师 一般 使用一些独特的字体 动机和页面 动机， 暗影是其中一个，它 可以让页面中的文字和元素 存在立体的 动机，从而被突出出来 。 比方关于文字 暗影，传统的 步骤可能需求将文字切出来，直接 使用图片，假如考量SEO和网站性能，还可能会 使用CSS Sprites等技术将图片整合：

 

这是很辣手的 事件，拼合图片会花掉你的大量 工夫，并且为了实现更好视觉 动机，你可能还要 使用高 品质的32位png图片，这又要让你面对该死的IE 6的png透明问题！

事实上，关于文字的 暗影 动机，我们 彻底 可以用CSS来实现！

可以查看 查看demo 先 。

Text-shadow

text-shadow 可以让我们实现 圆满的文字 暗影 动机 。 根本写法：

text-shadow:[ 色彩 x轴 y轴 含糊半径],[ 色彩 x轴 y轴 含糊半径]...

或者

text-shadow:[x轴 y轴 含糊半径 色彩],[x轴 y轴 含糊半径 色彩]...

这里的 色彩便是 暗影的 色彩，你 可以将 色彩写在前面，也 可以写在最终 。x轴和y轴分别是其 暗影的偏移位置，含糊半径 可以 了解为 暗影长度 。并且现在大 部分阅读器都 支撑多层 暗影，你 可以用逗号 离开多组设置(固然也 可以只不过用单个设置) 。

示例：

动机如下图：

该属性当前被除IE之外的大 部分阅读器 支撑，关于IE，我们 可以 使用shadow滤镜来实现：

filter: Shadow(Color='black', Direction='135', Strength='2')

你可能已经 留神到， 使用shadow滤镜不得不定义角度 direction，而不能定义xy轴，z轴也被换成了strength 。 留神， 使用该滤镜的时候，不 可以设置背景 色彩，不然滤镜将无效！另外假如你的数学不是很好，不太懂三角函数的算法，你 可以 使用IE的另外一个滤镜：dropshadow：

filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

好吧，IE总是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是 支撑多层 暗影的！ 比方， 可以这样写：

filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')

dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')

dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

欲了解更多关于IE的这两个滤镜，请查看：Shadow 和 Dropshadow

让我们看一个多层 暗影的例子(这里 忽视了IE)：

动机如图：

这里我们 使用到了rgba 色彩，它是一种在CSS中同时申明 色彩及其透明度的一种 步骤，且被大多数A级阅读器 支撑的 色彩属性(除了IE)，了解更多请查看：《RGBa 色彩的阅读器 支撑》——同时我们推举关于纯色半透明的状况 使用这种 方便的写法 。

text-shadow的阅读器兼容性

当前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5 支撑，IE不 支撑 。需求 留神的是，Safari惟独4.0才 支撑多层 暗影 。

  • IE各个版本都不 支撑text-shadow；
  • Opera 9.5+ 支撑最多6-9层 暗影，并 使用CSS2渲染顺序(最先定义的 暗影在最下面) 。并且出于性能的缘由，含糊半径被 制约到100px；
  • Gecko (Firefox) 实际上 支撑无限层text-shadows (不过不 提议尝试) 并遵照新的CSS3渲染顺序(最先定义的 暗影在最上面)；
  • Safari 1.1-3.2只 支撑单层text-shadow (只显示第一个逗号之前的申明而 忽视后面的) 。Safari 4.0+才 支撑多层 暗影以及新的CSS3渲染顺序；

box-shadow

先来说IE，IE不 支撑box-shadow属性，然而上面提到的两个滤镜都 可以用来实现 暗影 动机 。这也便是说，IE并没有把文字 暗影和盒子 暗影 划分！这就会浮现一些问题：元素中的文字会继承元素的 暗影设置 。然而假如你不定义该元素的background和border，就只会浮现文字 暗影，假如只定义background属性而不定义border，就只会浮现盒子 暗影，文字不会浮现 暗影；而假如只定义了border属性而不定义background，就即会浮现盒子 暗影，内容文字及图片也会浮现 暗影 。感兴趣的 同学 可以折腾一下 。

好了，现在让我们忘了IE，来看一看box-shadow 。事实上，了解了text-shadow之后，box-shadow就很好 了解了，当前惟独firefox和safari/chrome通过私有属性 支撑box-shadow属性 。而Opera阅读器 固然当前还不 支撑该属性，然而在其文档中提到下一个版本的引擎Presto 2.3(当前最新版的Opera 10.10的引擎是Presto 2.2.15)中将会 支撑 box-shadow，那就让我们 渐渐期待吧 。

box-shadow的语法和text-shadow是一样的 。

事实上，box-shadow和border-radius是很好的搭档：

动机如图：

firefox在3.5版本中才开始 支撑box-shadow，当前对 暗影的渲染还不是很 圆满 。

总结

CSS 暗影是CSS3中很有用的 特点，我们已经 可以在Firefox/webkit/Opera中 使用text-shadow，很快也 可以在这些阅读器中实现box-shadow 。唯独IE特立独行，还在 保持它那 蹩脚的滤镜，这真是个杯具 。