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. Android使用Fragment来实现ViewPager的功能（解决切换Fragment状态不保存）以及各个Fragment之间的通信

    以下内容为原创,转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3364728.html 我前两天写过一篇博客<Android使用Fragment来 ...

  2. UIWebView的应用和其中的JS与OC间传值

    现在有很多的应用已经采用了WebView和html语言结合的开发模式.html5一直很火因为一份代码可以在多个平台上运用啊,效果各不相同都很美观,也越来越有一些公司直接招后台程序员和html5程序员, ...

  3. 定制Android透明按钮

    自己在学习和做例子的过程中,常常会需要按钮,由于系统自带按钮样式不太好看,所以需要我们自己来定制项目得按钮,我常常采用2中方法: 1.是制作9-patch的图片,这样能够匹配文字内容的长短. 2.是指 ...

  4. iOS7.0后隐藏状态栏(UIStatusBar)

    现象: 升级到iOS7后,UIStatusBar的出现导致现有UI界面乱掉了. 原因: 由于写死了某些控件的绝对位置,原先隐藏UIStatusBar的代码没有在iOS7中起作用 解决方法: iOS7以 ...

  5. Xcode8以及iOS10问题总结!

    Xcode8的问题 注释功能问题解决 打开终端,命令运行: sudo /usr/libexec/xpccachectl 重启电脑 在xib和stroyboard出现大量警告,需要重新适配,字体所占用宽 ...

  6. 【代码笔记】iOS-把<br!>换成\n

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  7. go的环境变量设置

    GOROOT go的安装路劲 如:D:\Program Files\Go GOPATH go的工作路径 GOPATH可以设置多个.存放包文件.比如你引入 "xxx"包.那么go会去 ...

  8. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  9. 正则表达式 exec 获取字符串中的汉字

    要求:仅获取attr中的 “编辑发起状态的执行人表单” ,路径C:\fakepath\是不固定的,可以是C:\fakepath\hhh\hhhh\ 解决: var attr = C:\fakepath ...

  10. Git从零教你入门（4）：Git服务之 gogs部署安装

    Git从零入门系列4: 先看上一篇文章: http://www.51testing.com/index.php?uid-497177-action-viewspace-itemid-3706817 今 ...