1. 文字阴影 text-shadow

  • 使用：
  • text-shadow:    水平方向偏移量    垂直方向偏移量    模糊程度    颜色; 
    • #box {
      
     text-shadow: 10px 10px 3px deeppink;    // 1个阴影
      
}
    • 多个阴影 加一个逗号 写第二个阴影的样式 
      #box {
      
     text-shadow: 10px 10px 3px deeppink, 20px 20px 6px blue;    // 2个阴影
      
}

2. text-shadow 做 浮雕文字 

  • 使用：
  • #box:hover {
    
    color: #fff;    //文字为 白色
    
    text-shadow: 2px 2px 5px #000;    // 黑色描边
    
    }

3. text-shadow 做 文字模糊

  • 使用：
  • #box:hover {
    
    color: transparent;    // 文字设置为透明
    
    text-shadow: 0px 0px 80px rgba(0, 0, 0, 0.3);        

    // 初探 CSS3 过渡
        transition: 1s；
    
    }

4. 文本描边 -webkit-text-stroke 

  • 使用：
  • #box:hover {
    
     /* 文本描边：描边区域的宽度  颜色 */
    
     -webkit-text-stroke:2px yellowgreen ;
    
}

5. 文字排版 

  • 使用：
  • #box:hover {
    
    unicode-bidi: bidi-override;        // 必须配合使用    

    // direction: ltr;    // 默认方向，从左到右
    
    direction: rtl;    // 从右到左
    
    }

6. 文字背景图片 -webkit-background-clip 

  • 使用：
  • #box:hover {
    
    background-image: url(./img/bg.jpg);
    
    background-repeat: no-repeat;

    /* 背景裁剪 */
    
    -webkit-background-clip: text;        // 沿着文字呈现

    color: rgba(255, 0, 0, 0.3);    // 让文本颜色透明，即可看到文字背景图
    
    background-position: -12px -60px;    // 调背景图片的位置
    
}
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>CSS3 文字样式</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            body>div {
    
                width: 500px;
    
                margin: 60px auto;

                font-size: 27px;
    
                color: #3465c3;
    
                text-align: center;
    
                line-height: 54px;
    
                background-color: #eee;
    
            }

            #double_shadow:hover {
    
                text-shadow: 10px 10px 3px rgba(255, 0, 0, 0.3), 20px 20px 6px rgba(0, 0, 255, 0.5);
    
            }

            #embossed_text:hover {
    
                color: #eee;
    
                text-shadow: 0px 0px 6px #000;
    
            }

            #fuzzy_text:hover {
    
                color: transparent;
    
                transition: 1s;
    
                text-shadow: 0px 0px 30px rgba(43, 2, 2, 0.8);
    
            }

            #stroke_text:hover {
    
                font-size: 32px;
    
                font-weight: 700;
    
                -webkit-text-stroke: 1px red;
    
            }

            #rtl_text:hover {
    
                unicode-bidi: bidi-override;
    
                direction: rtl;
    
            }

            #bg_img_text:hover {
    
                font-size: 48px;
    
                font-weight: 700;

                background-image: url(./img/RocketRaccoon.jpg);
    
                -webkit-background-clip: text;
    
                color: transparent;
    
                background-repeat: no-repeat;
    
                background-position: -725px -877px;
    
            }
    
        </style>
    
    </head>

    <body>

        <div id="text_shaow">
    
            <span id="double_shadow">文字双阴影</span><br/>

            <span id="embossed_text">浮雕文字</span><br/>

            <span id="fuzzy_text">文字模糊</span><br/>
    
        </div>

        <div id="text_border">
    
            <span id="stroke_text">文字描边</span>
    
        </div>

        <div id="text_direction">
    
            <span id="rtl_text">文字排版</span>
    
        </div>

        <div id="text_bg_img">
    
            <span id="bg_img_text">文字背景</span>
    
        </div>

    </body>
    
</html>

CSS3_文本样式的更多相关文章

  1. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  2. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  3. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  4. 重温CSS之背景、文本样式

    CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...

  5. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  6. css文本样式及控制文本的大小写

    常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. css笔记-文本样式

    聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...

  8. 20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

    目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...

  9. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

随机推荐

  1. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  2. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  3. 防止Web表单重复提交的方法总结

    在Web开发中,对于处理表单重复提交是经常要面对的事情.那么,存在哪些场景会导致表单重复提交呢?表单重复提交会带来什么问题?有哪些方法可以避免表单重复提交? 表单重复提交的场景 1.场景一:服务端未能 ...

  4. ext.net单元格内容换行显示

    增加style .x-grid3-cell-inner {     white-space: normal; }

  5. [物理学与PDEs]第1章第2节 预备知识 2.3 Faraday 电磁感应定律

    1.  Faraday 电磁感应定律: 设 $l$ 为任一闭曲线, 则 $$\bex \oint_l{\bf E}\cdot\rd {\bf l} =-\int_S \cfrac{\p {\bf B} ...

  6. MyEclipse编码方式设置

    1.windows -> Preferences -> general -> Workspace:

  7. AB PLC分类

    AB PLC产品更新速度还是挺快的,以前很多产品都停产了,所以分类也跟着调整,就目前而言: 一.主要类型 AB PLC按类型,主要分为三大类: • 小型:MicroLogix控制器 • 中型:Comp ...

  8. Python中应该使用%还是format来格式化字符串？

    转载自http://www.cnblogs.com/liwenzhou/p/8570701.html %的特点是,前面有几个%,后面的括号里就得有几个参数,如果只有一个%,括号可以省略 基本格式 'a ...

  9. 安装scala

    Linux 环境 安装 下载的scala linux 压缩包放在目录 "/usr/scala “下 解压 tar -zxvf scala-2.11.8.tgz 再配置环境, 编辑文件 ”vi ...

  10. php exit die的区别

    exit 输出一个消息并且退出当前脚本 void exit([string $status]) void exit(int $status)中止脚本的执行.尽管调用了exit(),Shutdow函数以 ...