扩展阅读
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • HTML5 在线工具 html5demos
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • 框架网页中如何使用sendredirect(a.html),使得a.html不显示在框架中,是整页显示!
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • Sar数据转HTML Sar2html
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • 关于editplus的使用,编译完生成.class后,我又编写了html来执行applet,将其保存,如何经ie解释打开(直接在editplus上操作)不是显示html语言呀
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • python实现html转ubb代码(html2ubb)
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • asp.net去除HTML标签删除HTML小例子
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • 用正则查找html中有id属性的html标签
  •  
    当前位置:  Web服务器/前端>html5

    html5/css3文本阴影(text-shadow)详解及示例

     
        发布时间:2013-8-1  


        本文导语:  text-shadow属性用于设置文本内容的阴影效果或模糊效果。目前,text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看,...

       text-shadow属性用于设置文本内容的阴影效果或模糊效果。目前,text-shadow属性已经得到Safari浏览器Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看,大部分移动平台的Web浏览器都能得到很好的支持。

     text-shadow的语法box-shadow的语法基本上一致:  

    text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

    相关属性 : 无

    取值

    <color> :指定颜色

    <length> :由浮点数字单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

    <opacity> :由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将两个 length 全部设定为 0 。请参阅 长度单位。

    说明

    设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

    text-shadow是可以省略前缀的几个CSS属性之一,类似的还有box-shadow,它必须应用于文本,并它们有相同的四个参数

    x-offset                水平位移
    y-offest                垂直位移
    blur                      模糊值
    color of shadow         阴影颜色
    h1 {
      text-shadow: 0 1px 0 #fff;
      color: #292929;
      }


    如下代码为使用text-shadow的简单示例:

    <style type="text/css">
    div{
    text-shadow:5px -10px 5px red;
    color:#666;
    font-size:16px;
    }
    </style>

    严格来说 text-shadow不能算是css3的属性。实际上在css2.0时就已经有这个属性。不过不能被浏览器广泛支持。随着html5和css3的兴起。text-shadow也跟着受到重视。text-shadow的作用是在不使用图片的情况下,通过设置阴影或者模糊字体来增加文字的质感。

    在html5和css3迅速推广的今天,掌握text-shadow这个简单的属性可以说是势在必行了。

    常见的效果实例1:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>textshadow</title>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <style>
    h2 {margin:0;padding:0;text-align:center;padding:10px 0;background-color:#ccc;}
    .sp1 {color:#fff;text-shadow: 0 0 20px red;}
    .sp2 {text-shadow: -1px -1px white, 1px 1px #333;color:#ccc;}
    .sp3 {text-shadow: 1px 1px white, -1px -1px #777;color:#ccc;}
    .sp4 {color: transparent; text-shadow: 0 0 3px #f96;}
    .sp5 {color: transparent; text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;}
    .sp6{color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),
    -4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);}
    </style>
    </head>
    <body>
    <h2 class="sp1">设置多个阴影</h2>
    <h2 class="sp2">设置多个阴影</h2>
    <h2 class="sp3">设置多个阴影</h2>
    <h2 class="sp4">设置多个阴影</h2>
    <h2 class="sp5">设置多个阴影</h2>
    <h2 class="sp6">设置多个阴影</h2>
    </body>
    </html>

    示例2:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #text
    {
    text-shadow:2px 2px 0px orange;
    }
    #text1
    {
    text-shadow:2px 2px 5px orange;
    }
    #text2
    {
    text-shadow:2px 2px 5px orange,-2px 2px 5px green;
    }
    /*]]>*/
    </style>
    </head>
    <body>
    <div id="text">
    没有阴影</div>
    <div id="text1">
    有阴影
    </div>
    <div id="text2">
    阴影叠加
    </div>
    </body>
    </html>


    • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:html5/css3文本阴影(text-shadow)详解及示例
    相关文章推荐:


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3