ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 了解CSS3的文字阴影效果 - Text Shadow effects

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

原创 Linux操作系统 作者:jjfat 时间:2012-04-10 16:13:38 0 删除 编辑

日期: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个像素。颜色为灰色,效果如下:

...

...

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

http://www.gbin1.com/technology/css/20120408css3textshadow/

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-720828/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2011-10-08

  • 博文量
    316
  • 访问量
    377837