首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

懂得CSS3的文字阴影效果 - Text Shadow effects

2012-08-26 
了解CSS3的文字阴影效果 - Text Shadow effects日期:2012-4-8??来源:GBin1.com以往的CSS开发中,如果我们需

了解CSS3的文字阴影效果 - Text Shadow effects

日期:2012-4-8??来源:GBin1.com

懂得CSS3的文字阴影效果 - Text Shadow effects

以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow就可以实现。在今天我们带给大家的这篇文章中,我们将简单的介绍CSS3的text-shadow属性,看看我们能够制作什么样的文字特效。希望大家喜欢!

文字阴影CSS3属性

CSS3文字阴影可以应用于各种页面上的文字,首先这里我们介绍一下主要的属性:

xPosition: 这个属性定义了水平位置相对于文字本身的位移yPosition:和xPosition类似,定义垂直的位移blurSize:定义阴影的模糊效果color:定义了阴影颜色,支持hex, rgb,rgba,hsl,hsla和颜色名称

我们可以定义如下的CSS3属性:

pre.gbin1Text{? text-shadow: 1px 1px 2px #202020}

上面CSS定义了一个向右下方移动1个像素的阴影,并且模糊为2个像素。颜色为灰色,效果如下:

GBin1 | 中文互联 

以上演示中我们看到了不错的阴影效果。

目前CSS3的text-shadow效果在如下的浏览器中被支持:

ChromeFirefoxOperaMozillaIE10

是的,老版本的IE并不支持文字阴影效果。但是如果你在老版本浏览器中使用阴影的话,不会有任何影响。只不过你看不到超棒的阴影效果。

...

原文来自:了解CSS3的文字阴影效果 - Text Shadow effects

热点排行