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. Linux Socket I/O

    Ref: 一文读懂Socket通信原理 幽默讲解 Linux 的 Socket IO 模型

  2. luogu P5289 [十二省联考2019]皮配

    传送门 首先考虑一个正常的dp,设\(f_{i,j,k}\)为前\(i\)个学校,\(j\)人在\(\color{#0000FF}{蓝阵营}\),\(k\)人在\(\color{#654321}{吔} ...

  3. vscode 正则表达式替换

    比如把1.aa2.bbb替换成 1.aa2.bbb则,查找\d+ 替换成 \n$0 $0为查找的正则匹配项editplus为\0

  4. 【汇总目录】C#

    [2019年04月29日] C# textbox 自动滚动 [2019年02月07日] C#利用VUDP.cs开发网络通讯应用程序 [2019年02月06日] C#利用VINI.cs操作INI文件 [ ...

  5. 爬虫-通过本地IP地址从中国天气网爬取当前城市天气情况

    1.问题描述 ​ 最近在做一个pyqt登录校园网的小项目,想在窗口的状态栏加上当天的天气情况,用爬虫可以很好的解决我的问题. 2.解决思路 ​ 考虑到所处位置的不同,需要先获取本地城市地址,然后作为中 ...

  6. HTTP协议08-请求首部字段

    请求首部字段 请求首部字段是从客户端往服务器端发送请求报文中所使用的字段,用于补充请求的附加信息.客户端信息,对响应内容相关的优先级等内容 1)Accept 通知服务器,用户代理能够处理的媒体类型及媒 ...

  7. ansible 使用记录

    copy: ansible server -m copy -a 'src=/etc/ansible/port/iptables dest=/etc/sysconfig/iptables owner=r ...

  8. Angular笔记-select

    --select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...

  9. Java的家庭记账本程序(J)

    日期:2019.3.9 博客期:041 星期六 这次就来看看我使用全新的模板写的家庭记账本程序!本次附带配色样式!作为本周的学习进度条吧!明天再研究微信小程序的方法! 这一次的记账本程序加了很多功能! ...

  10. ES6 语法学习(一)

    1.let 和 const 关键字 let 与 var 的区别有: a.let 声明的变量只在当前的块级作用域内有效(块级作用域通俗的话就是被{}包裹起来的区域声明对象的{}例外). b.let 声明 ...