zoukankan      html  css  js  c++  java
  • 了解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效果在如下的浏览器中被支持:

    • Chrome
    • Firefox
    • Opera
    • Mozilla
    • IE10

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

    ....

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

  • 相关阅读:
    Android屏幕适配
    设计模式学习心得
    C语言中的作用域、链接属性与存储属性
    二级指针删除单向链表
    C++编程风格
    python中index、slice与slice assignment用法
    lua_pcall与lua_call之间的区别
    lua-C++ userdata使用
    lua中调用C++函数
    C++中为什么有时要使用extern "C"
  • 原文地址:https://www.cnblogs.com/gbin1/p/2440699.html
Copyright © 2011-2022 走看看