text-shadow

语法

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

也就是：

text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...

或者

text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

取值:

<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值

<color>：指定阴影颜色，也可以是rgba透明色

<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。

如下图所示：

说明：

可以给一个对象应用一组或者多组阴影效果。方法与前面的语法一样 用逗号隔开 text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。

浏览器的兼容性

我们来看一下实例：

首先给所有的demo一个公用的样式和类名

<html>

    <head>

        <meta charset="UTF-8">

        <style type="text/css">

            #shadow{

                width: 120px;

                height: 50px;

                border: 1px solid orange;

                text-align: center;

                vertical-align: bottom;

                font-size: 17px;

                text-shadow: 1px 1px 0px blue;

            }

        </style>

    </head>

    <body>

        <div id="shadow">

            文字阴影效果

        </div>

    </body>

</html>

更详细的讲解 请移步 http://www.w3cplus.com/blog/52.html

CSS3文本换行

单词太长的话 就会超出某个区域 在CSS3中 word-wrap属性允许你允许强制文本换行 即使这意味着会对单词进行拆分。

实例：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .pc {

                width: 11em;

                border: 1px solid orange;

                border-bottom-left-radius: 8px;

                word-wrap: break-word;

            }

        </style>

    </head>

    <body>

        <p class="pc">This paragraph contains a very long word:

            thisisaveryveryveryveryveryverylongword.

            The long word will break and wrap to the next line.</p>

    </body>

</html>

新的文本属性

HTML 学习笔记 CSS3 (文本效果)的更多相关文章

  1. css3学习笔记之文本效果

    CSS3的文本阴影 CSS3中,text-shadow属性适用于文本阴影. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html ...

  2. css3学习总结5--CSS3文本效果

    CSS3 文本效果 1. text-shadow 2. word-wrap text-shadow属性使用方法 text-shadow属性使用方法如下所示. text-shadow:length le ...

  3. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  4. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  5. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  6. 第七十八节，CSS3文本效果

    CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  7. CSS3：CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  8. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

  9. W3Cschool学习笔记——CSS3教程

    向 div 元素添加圆角: div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ ...

随机推荐

  1. SQLite Design and Concepts

    API 分为两大类 core API. 基本的SQL操作 extension API. 创建自定义的SQL操作. 基本数据结构 需要了解的组成部分有连接.statments.B树.pager. 为了写 ...

  2. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  3. android SharedPreferences 轻量级存储！

    首先在当前进程也就是当前的项目里面进行存储 SharedPreferences.Editor editor = mContext.getSharedPreferences("tvplay&q ...

  4. AFNetworking简单用法

    GET请求 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; [manager GET:URL parameters:ni ...

  5. Axure RP7.0 使用记录手册

    第一章   Axure RP7.0 下载,汉化与注册教程 一.下载软件 Axure官网:http://www.axure.com/ Axure教程官网:http://www.iaxure.com/ 网 ...

  6. org.apache.hadoop.ipc.RemoteException(java.io.IOException)

    昨晚突然之间mr跑步起来了 jps查看 进程都在的,但是在reduce任务跑了85%的时候会抛异常 异常情况如下: 2016-09-21 21:32:28,538 INFO [org.apache.h ...

  7. js中同步与异步请求方式

    异步请求方式: $.ajax({ url : 'your url', data:{name:value}, cache : false, async : true, type : "POST ...

  8. JSP连接数据库

    1.将c3p0-0.9.5.2.jar/mchange-commons-java-0.2.11.jar/ojdbc6.jar三个包放在WEB-INF的lib文件夹下,将web.xml文件放到WEB-I ...

  9. ADO.NET知识汇总

    这又是一篇记录平常工作笔记的博客,无论是在排版还是解说上都不会有太多要求.同时这也是一篇不上博客园首页的博客,Just记录一些工作笔记. vSelect返回单个值 string connSQL = @ ...

  10. 烂泥：【解决】VMware Workstation中安装ESXI5.0双网卡问题

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 由于需要做ESXI相关的实验,所以就在自己的机器上利用VM虚拟ESXI进行实验.因为此次实验是需要两块网卡的,所以就在创建ESXI虚拟机时添加了两块网卡 ...