通过CSS做出网站3D文字效果
作者：佚名 时间：2014-03-16
通过CSS做出网站3D文字效果
大家知道通过图像处理软件可以使文字具有立体三维效果，那些我们能过CSS代码在做网站时实现呢？答案是肯定的：我们将通过text-shadow属性来实现这个功能。
text-shadow属性允许通过阴影的使用使文本具有三维外观。这个属性值包括一个必需的偏移量，还有可选的模糊范围和颜色。这个属性可能包括用逗号分开的多于一个的属性值组来得到阴影层，而此后每组值都是叠加在前一层上的，但总是在原始文本的下面。
属性需要的偏移量是两个长度值组成：第一个值指定水平偏移量；第二个指定垂直偏移量。正属性值则反阴影放置在该文本的右下方，向右和向下的偏移量是由两个长度值指定的。负值则把 阴影向左上方移动。
可选模糊范围也是长度值，它指定了模糊边框，而其效果则取决于输出代理。另一个阴影值是颜色。当然这可以是一人RGB组合或颜色名，用来指定阴影的颜色。如果不指定该值，text-shadow将使用color属性的颜色值。例如：
h1 {text-shadow:2px 2px 2px red}
p:first-letter {text-shadow:-1px -1px purple, 1px 1px orange}
第一个texe-shadow示例使得在文档一级标题向后2个像素，向下10个像素，向右10个像素的位置出现模糊的红色阴影。第二个示例在每个段落的第一个字母后产生2个阴影。紫色阴影的位置是第一个字母上面对个像素，左面5个像素的位置。另一个阴影除了是紫色以外与第一个示例一样，其位置是每个段落第一个字母向右10个像素向下10个像素。如图所示：
目前流行只有谷歌与360浏览器内核的部分浏览器可以支持该网站字体的CSS属性。
如没特殊注明，文章均为上海联楷网络原创,转载请注明来自：http://www.linksj.com/contact/20151229/n7338.html
