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. Docker:手动制作镜像 [五]

    一.制作docker镜像的步骤 1.启动容器安装软件服务 2.将安装好服务的容器commit提交为镜像 3:.启动新容器来测试新提交的镜像 二.制作支持ssh远程登录的docker镜像 1.启动容器安 ...

  2. 2018年7月6日go语言学习

    Go是一门并发支持.垃圾回收的编译型系统编程语言. 特点:类型安全和内存安全 以非常直观和极低的方案实现高并发 高效的垃圾回收机制 快速编译 为多核计算机提供性能提升方案 Utf-8编码支持 Go源码 ...

  3. maven 分隔环境

    在pom.xml 上 添加 把要分隔的环境 文件 弄成这样 打包 mvn clean package -Dmaven.test.skip=true -P+环境名 例子:mvn clean packag ...

  4. 【译】索引进阶(一):SQL SERVER索引介绍

      [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正]  原文链接:http://www.sqlservercentral.com/articles/Stairway+Series/7 ...

  5. Houdini SDF/Raymarching/等高曲面绘制

    1 , SDF <1> union  min(a,b) <2> intersect: max(a,b) <3> Substract  a-b  : if(b> ...

  6. fiddler主要图标说明

    主要图标含义说明: 正在将请求数据发往服务器 正在从服务器下载返回数据 请求过程中暂停 返回过程中暂停 请求中使用了HTTP HEAD方法; 返回中应该没有body内容 请求中使用了HTTP CONN ...

  7. 帆软报表(finereport)单元格中各颜色标识的含义

    帆软报表(finereport)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形.  控件:单元格右侧中间的各种矩形.  左父格:单 ...

  8. Mockito框架入门教程(一)

    官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/hg/org/mockito/Mockito.html 项目源码:htt ...

  9. linux 安装telnet命令及使用

    一.CentOS下查看系统是否已安装telnetrpm -qa | grep telnettelnet-0.17-48.el6.x86_64telnet-server-0.17-48.el6.x86_ ...

  10. 关于strcpy函数形参类型的解析和指针作为输入型输出型参数的不同

    在C语言中,字符串一直都是热点,关于strcpy函数大家都很熟悉,但是真正了解的很少,一旦用到总会报一大堆莫名其妙错误,今天我就来给大家详细剖析一下strcpy函数. 虽然不能看到strcpy的内部实 ...