学习CSS3这一篇就够了

深碍√TFBOYSˉ_ 2022-12-13 04:35 103阅读 0赞

### 目录 ###

*  CSS
 *  第一章 CSS概述
 *   *  1.1、概述
     *  1.2、语法
     *  1.3、注释
     *  1.4、如何创建并引用
     *   *  1.4.1、外部样式表（外联式）
         *  1.4.2、内部样式表（内联式）
         *  1.4.3、内联样式（行内式）
     *  1.5、三种引入优先级
 *  第二章 CSS选择器
 *   *  2.1、id选择器
     *  2.2、class选择器
     *  2.3、标签选择器
     *  2.4、子代选择器
     *  2.5、后代选择器
     *  2.6、相邻兄弟选择器
     *  2.7、后续兄弟选择器
     *  2.8、交集选择器
     *  2.9、并集选择器
     *  2.10、通配符选择器
     *  2.11、伪类选择器
     *   *  2.11.1、anchor伪类
         *  2.11.2、input伪类
         *  2.11.3、other伪类
     *  2.12、属性选择器
     *  2.13、子串匹配属性选择器
 *  第三章 CSS常见样式
 *   *  3.1、背景样式
     *  3.2、文本样式
     *  3.3、字体样式
     *  3.4、链接样式
     *  3.5、列表样式
     *  3.6、表格样式
     *  3.7、轮廓样式
 *  第四章 CSS盒子模型
 *   *  4.1、概述
     *  4.2、内边距
     *  4.3、边框
     *  4.4、外边距
     *  4.5、外边距合并
 *  第五章 CSS显示特性
 *   *  5.1、块级元素
     *  5.2、内联元素
     *  5.3、可变元素
     *  5.4、类别修改
     *  5.5、元素隐藏
 *  第六章 CSS定位
 *   *  6.1、概述
     *  6.2、相对定位
     *  6.3、绝对定位
     *  6.4、浮动定位
 *  CSS3
 *  第一章 CSS3概述
 *  第二章 CSS3边框
 *  第三章 CSS3圆角
 *  第四章 CSS3背景
 *  第五章 CSS3渐变
 *   *  5.1、线性渐变
     *  5.2、径向渐变
 *  第六章 CSS3文本效果
 *  第七章 CSS3字体
 *  第八章 CSS3 2D 转换
 *   *  8.1、translate() 方法
     *  8.2、rotate() 方法
     *  8.3、scale() 方法
     *  8.4、skew() 方法
     *  8.5、matrix() 方法
 *  第九章 CSS3 3D 转换
 *   *  9.1、rotateX() 方法
     *  9.2、rotateY() 方法
 *  第十章 CSS3过渡
 *  第十一章 CSS3动画
 *  第十二章 CSS3多列
 *  第十三章 CSS3用户界面
 *   *  13.1、调整尺寸(resize)
     *  13.2、方框大小调整(box-sizing)
     *  13.3、外形修饰(outline-offset)
     *  13.4、新的用户界面特性
 *  第十四章 CSS3弹性盒子
 *  第十五章 CSS3多媒体大小
 *   *  15.1、多媒体概述
     *  15.2、多媒体类型
     *  15.3、多媒体功能
     *  15.4、多媒体实例

--------------------

# CSS #

# 第一章 CSS概述 #

## 1.1、概述 ##

CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。

## 1.2、语法 ##

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明

![image-20201008080305093][]

比如说，我们要让p标签内的文本都是红色，字体居中，我们就可以这么来写

p { color: red;text-align: center;}

为了让CSS可读性更强，你可以每行只描述一个属性

p { 
        color: red;
        text-align: center;
    }

## 1.3、注释 ##

注释是用来解释你的代码并且可以随意编辑它，但是浏览器会忽略它。

CSS注释以 **/\*** 开始, 以 \***/** 结束，如下：

/* 这是一个注释 */
    p { 
        /* 这是一个注释 */
        color: red;
        text-align: center;
    }

## 1.4、如何创建并引用 ##

### 1.4.1、外部样式表（外联式） ###

main.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <p>外部样式</p>
    </body>
    </html>

main.css

p { 
        color: red;
        text-align: center;
    }

### 1.4.2、内部样式表（内联式） ###

main.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style> p { color: red; text-align: center; } </style>
    </head>
    <body>
        <p>外部样式</p>
    </body>
    </html>

### 1.4.3、内联样式（行内式） ###

main.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <p style="color: red;text-align: center">外部样式</p>
    </body>
    </html>

## 1.5、三种引入优先级 ##

*  三种引入方式内容属性不冲突：三种方式会同时起作用。
 *  三种引入方式内容属性会冲突：
    
     *  内联式和外联式冲突，内联式位于外联式上方。— 由外联式决定
     *  内联式和外联式冲突，外联式位于内联式上方。— 由内联式决定
     *  三种方式并存且冲突。 — 由行内式决定

> 注意：当属性值内存在\*\*“!important ”\*\*关键字的时候，优先使用该类方式导入属性值。

格式：key: value !important;
    举例：color: red !important;

# 第二章 CSS选择器 #

## 2.1、id选择器 ##

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。

**需求描述** ：为id为part1的段落添加红色字体样式

#part1 { 
        color: red;
    }

## 2.2、class选择器 ##

class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。

**需求描述** ：为class为green的段落添加绿色字体样式，为class为bold的段落添加加粗字体样式

.green { 
        color: green;
    }
    
    .bold { 
        font-weight: bold;
    }

## 2.3、标签选择器 ##

除了使用id选择器和class选择器，我们也可以直接使用标签选择器。

**需求描述** ：为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式

p { 
        color: yellow;
    }
    
    a { 
        color: red;
    }

## 2.4、子代选择器 ##

子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。

**需求描述** ：为div标签下所有h1儿子节点设置为红色文本样式

div>h1{ 
        color: red;
    }

## 2.5、后代选择器 ##

标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用 空格 隔开。

**需求描述** ：为所有段落标签中的超链接标签添加红色文本

.part a { 
        color: red;
    }

## 2.6、相邻兄弟选择器 ##

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。定义的时候用 + 隔开。

**需求描述** ：为div之后的第一个p标签元素设置为黄色文本样式

<div>
        <p>DIV 内部段落。</p>
    </div>
    <p>DIV 之后的第一个 P 元素。</p>
    <p>DIV 之后的第二个 P 元素。</p>

div + p { 
        background-color: yellow;
    }

## 2.7、后续兄弟选择器 ##

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。

**需求描述** ：为div之后的所有p标签元素设置为黄色文本样式

<div>
        <p>DIV 内部段落。</p>
    </div>
    <p>DIV 之后的第一个 P 元素。</p>
    <p>DIV 之后的第二个 P 元素。</p>

div ~ p { 
        background-color: yellow;
    }

## 2.8、交集选择器 ##

选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。定义的时候用 标签名.ID名/类名 。

**需求描述** ：为所有p标签且class为part的段落添加绿色文本样式

p.part { 
        color: red;
    }

## 2.9、并集选择器 ##

多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用 逗号 隔开。

**需求描述** ：为p标签、h1标签、class=‘link’、id='click’的这几种元素添加红色文本样式

p, h1, .link, #click { 
        color: red;
    }

## 2.10、通配符选择器 ##

通配符选择器可以匹配任何标签，我们常用于统一页面样式。

**需求描述** ：将页面所有元素的字体设置为红色文本样式

<div>DIV文本</div>
    <p>P文本</p>
    <a href="https://www.baidu.com">打开百度，你就知道！</a>

* { 
        color: red;
    }

## 2.11、伪类选择器 ##

CSS伪类是用来添加一些选择器的特殊效果。

### 2.11.1、anchor伪类 ###

a:link { color:#FF0000;} /* 未访问的链接样式 */
    a:visited { color:#00FF00;} /* 已访问的链接样式 */
    a:hover { color:#FF00FF;} /* 鼠标划过链接样式 */
    a:active { color:#0000FF;} /* 已选中的链接样式 */

> 注意：推荐使用顺序为link、visited、hover、active

### 2.11.2、input伪类 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">示例</th> 
   <th align="left">示例说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-focus.html" rel="nofollow">:focus</a></td> 
   <td align="left">input:focus</td> 
   <td align="left">选择元素输入后具有焦点</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-checked.html" rel="nofollow">:checked</a></td> 
   <td align="left">input:checked</td> 
   <td align="left">选择所有选中的表单元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/css/cssref/sel-disabled.html" rel="nofollow">:disabled</a></td> 
   <td align="left">input:disabled</td> 
   <td align="left">选择所有禁用的表单元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-enable.html" rel="nofollow">:enabled</a></td> 
   <td align="left">input:enabled</td> 
   <td align="left">选择所有启用的表单元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-in-range.html" rel="nofollow">:in-range</a></td> 
   <td align="left">input:in-range</td> 
   <td align="left">选择元素指定范围内的值</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-out-of-range.html" rel="nofollow">:out-of-range</a></td> 
   <td align="left">input:out-of-range</td> 
   <td align="left">选择元素指定范围外的值</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-invalid.html" rel="nofollow">:invalid</a></td> 
   <td align="left">input:invalid</td> 
   <td align="left">选择所有无效值的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-valid.html" rel="nofollow">:valid</a></td> 
   <td align="left">input:valid</td> 
   <td align="left">选择所有有效值的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-optional.html" rel="nofollow">:optional</a></td> 
   <td align="left">input:optional</td> 
   <td align="left">选择没有"required"属性的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-required.html" rel="nofollow">:required</a></td> 
   <td align="left">input:required</td> 
   <td align="left">选择含有"required"属性的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-read-only.html" rel="nofollow">:read-only</a></td> 
   <td align="left">input:read-only</td> 
   <td align="left">选择只读属性的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-read-write.html" rel="nofollow">:read-write</a></td> 
   <td align="left">input:read-write</td> 
   <td align="left">选择可写属性的元素</td> 
  </tr> 
 </tbody> 
</table>

### 2.11.3、other伪类 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">示例</th> 
   <th align="left">示例说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-not.html" rel="nofollow">:not(selector)</a></td> 
   <td align="left">:not§</td> 
   <td align="left">选择所有p元素以外的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-empty.html" rel="nofollow">:empty</a></td> 
   <td align="left">p:empty</td> 
   <td align="left">选择所有没有子元素的p元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-firstchild.html" rel="nofollow">:first-child</a></td> 
   <td align="left">p:first-child</td> 
   <td align="left">选择所有p元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-first-of-type.html" rel="nofollow">:first-of-type</a></td> 
   <td align="left">p:first-of-type</td> 
   <td align="left">选择的每个p元素是其父元素的第一个p元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-last-child.html" rel="nofollow">:last-child</a></td> 
   <td align="left">p:last-child</td> 
   <td align="left">选择所有p元素的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-last-of-type.html" rel="nofollow">:last-of-type</a></td> 
   <td align="left">p:last-of-type</td> 
   <td align="left">选择每个p元素是其父元素的最后一个p元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-nth-child.html" rel="nofollow">:nth-child(n)</a></td> 
   <td align="left">p:nth-child(2)</td> 
   <td align="left">选择所有p元素的父元素的正数第二个子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-nth-of-type.html" rel="nofollow">:nth-of-type(n)</a></td> 
   <td align="left">p:nth-of-type(2)</td> 
   <td align="left">选择所有p元素正数的第二个为p的子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-nth-last-child.html" rel="nofollow">:nth-last-child(n)</a></td> 
   <td align="left">p:nth-last-child(2)</td> 
   <td align="left">选择所有p元素的父元素的倒数第二个子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-nth-last-of-type.html" rel="nofollow">:nth-last-of-type(n)</a></td> 
   <td align="left">p:nth-last-of-type(2)</td> 
   <td align="left">选择所有p元素倒数的第二个为p的子元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-only-child.html" rel="nofollow">:only-child</a></td> 
   <td align="left">p:only-child</td> 
   <td align="left">选择所有仅有一个子元素的p元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-only-of-type.html" rel="nofollow">:only-of-type</a></td> 
   <td align="left">p:only-of-type</td> 
   <td align="left">选择所有仅有一个子元素为p的元素</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-firstletter.html" rel="nofollow">:first-letter</a></td> 
   <td align="left">p:first-letter</td> 
   <td align="left">选择每个p元素的第一个字母</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-firstline.html" rel="nofollow">:first-line</a></td> 
   <td align="left">p:first-line</td> 
   <td align="left">选择每个p元素的第一行</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-before.html" rel="nofollow">:before</a></td> 
   <td align="left">p:before</td> 
   <td align="left">在每个p元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/sel-after.html" rel="nofollow">:after</a></td> 
   <td align="left">p:after</td> 
   <td align="left">在每个p元素之后插入内容</td> 
  </tr> 
 </tbody> 
</table>

## 2.12、属性选择器 ##

属性选择器可以根据元素的属性及属性值来选择元素。

**需求描述** ：为类型为text和button的input标签设置一下样式

input[type="text"] { 
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
    }
    
    input[type="button"] { 
        width: 120px;
        margin-left: 35px;
        display: block;
    }

**需求描述** ：如果title中包含多个单词并且以空格分隔，只要其中有hello，则为当前标签设置为蓝色字体样式

<h2>将会适用:</h2>
    <h1 title="hello world">Hello world</h1>
    <p title="student hello">Hello CSS students!</p>
    
    <h2>将不适用:</h2>
    <p title="student">Hi CSS students!</p>

[title~=hello] { 
        color: blue;
    }

**需求描述** ：如果title中包含一个单词，只要其中有zh，则为当前标签设置为蓝色字体样式

<h2>将会适用:</h2>
    <p lang="zh">Hello!</p>
    <p lang="zh-cn">Hi!</p>
    
    <h2>将不适用:</h2>
    <p lang="us">Hello!</p>
    <p lang="en">Hi!</p>

[lang|=zh] { 
        color: blue;
    }

## 2.13、子串匹配属性选择器 ##

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">[abc^=“def”]</td> 
   <td align="left">选择 abc 属性值以 “def” 开头的所有元素</td> 
  </tr> 
  <tr> 
   <td align="left">[abc$=“def”]</td> 
   <td align="left">选择 abc 属性值以 “def” 结尾的所有元素</td> 
  </tr> 
  <tr> 
   <td align="left">[abc*=“def”]</td> 
   <td align="left">选择 abc 属性值中包含子串 “def” 的所有元素</td> 
  </tr> 
 </tbody> 
</table>

如果希望对指向 baidu 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="baidu.com"] { 
        color: red;
    }

# 第三章 CSS常见样式 #

## 3.1、背景样式 ##

CSS 背景属性用于定义HTML元素背景的样式。

## 3.2、文本样式 ##

CSS 文本属性用于定义HTML文本内容的样式。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-color.html" rel="nofollow">color</a></td> 
   <td align="left">设置文本颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-direction.html" rel="nofollow">direction</a></td> 
   <td align="left">设置文本方向。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-letter-spacing.html" rel="nofollow">letter-spacing</a></td> 
   <td align="left">设置字符间距。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-dim-line-height.html" rel="nofollow">line-height</a></td> 
   <td align="left">设置行高。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-text-align.html" rel="nofollow">text-align</a></td> 
   <td align="left">对齐元素中的文本。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-text-decoration.html" rel="nofollow">text-decoration</a></td> 
   <td align="left">向文本添加修饰。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-text-indent.html" rel="nofollow">text-indent</a></td> 
   <td align="left">缩进元素中文本的首行。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-shadow.html" rel="nofollow">text-shadow</a></td> 
   <td align="left">设置文本阴影。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-text-transform.html" rel="nofollow">text-transform</a></td> 
   <td align="left">控制元素中的字母。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-unicode-bidi.html" rel="nofollow">unicode-bidi</a></td> 
   <td align="left">设置或返回文本是否被重写。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-pos-vertical-align.html" rel="nofollow">vertical-align</a></td> 
   <td align="left">设置元素的垂直对齐。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-white-space.html" rel="nofollow">white-space</a></td> 
   <td align="left">设置元素中空白的处理方式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-text-word-spacing.html" rel="nofollow">word-spacing</a></td> 
   <td align="left">设置字间距。</td> 
  </tr> 
 </tbody> 
</table>

## 3.3、字体样式 ##

CSS 字体属性用于定义HTML内容字体的样式。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-font.html" rel="nofollow">font</a></td> 
   <td align="left">在一个声明中设置所有的字体属性。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-font-family.html" rel="nofollow">font-family</a></td> 
   <td align="left">指定文本的字体系列。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-font-size.html" rel="nofollow">font-size</a></td> 
   <td align="left">指定文本的字体大小。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-font-style.html" rel="nofollow">font-style</a></td> 
   <td align="left">指定文本的字体样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-font-variant.html" rel="nofollow">font-variant</a></td> 
   <td align="left">以小型大写字体或者正常字体显示文本。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-font-weight.html" rel="nofollow">font-weight</a></td> 
   <td align="left">指定字体的粗细。</td> 
  </tr> 
 </tbody> 
</table>

## 3.4、链接样式 ##

> 注意：推荐使用顺序为link、visited、hover、active

## 3.5、列表样式 ##

CSS 列表属性用于定义HTML常见列表的样式。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-list-style.html" rel="nofollow">list-style</a></td> 
   <td align="left">简写属性，用于把所有用于列表的属性设置于一个声明中。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-list-style-image.html" rel="nofollow">list-style-image</a></td> 
   <td align="left">将图像设置为列表项标志。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-list-style-position.html" rel="nofollow">list-style-position</a></td> 
   <td align="left">设置列表中列表项标志的位置。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-list-style-type.html" rel="nofollow">list-style-type</a></td> 
   <td align="left">设置列表项标志的类型。</td> 
  </tr> 
 </tbody> 
</table>

## 3.6、表格样式 ##

CSS 表格属性用于定义HTML表格的样式。

## 3.7、轮廓样式 ##

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

# 第四章 CSS盒子模型 #

## 4.1、概述 ##

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

![CSS box-model][]

不同部分的说明：

*  **Margin(外边距)** \- 清除边框外的区域，外边距是透明的。
 *  **Border(边框)** \- 围绕在内边距和内容外的边框。
 *  **Padding(内边距)** \- 清除内容周围的区域，内边距是透明的。
 *  **Content(内容)** \- 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距、边框和外边距。

下面的例子中的元素的总宽度为300px：

div { 
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }

让我们自己算算：  
300px (宽)  
\+ 50px (左 + 右填充)  
\+ 50px (左 + 右边框)  
\+ 50px (左 + 右边距)  
= 450px

也就是如下的图：

![image-20201008214738875][]

*  最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
 *  最终元素的总高度计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

## 4.2、内边距 ##

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

![img][]

常用的属性：

## 4.3、边框 ##

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS边框属性允许你指定一个元素边框的样式和颜色。

常用的属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border.asp" rel="nofollow">border</a></td> 
   <td align="left">简写属性，用于把针对四个边的属性设置在一个声明。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-style.asp" rel="nofollow">border-style</a></td> 
   <td align="left">用于设置元素所有边框的样式，或者单独地为各边设置边框样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-width.asp" rel="nofollow">border-width</a></td> 
   <td align="left">简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-color.asp" rel="nofollow">border-color</a></td> 
   <td align="left">简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-bottom.asp" rel="nofollow">border-bottom</a></td> 
   <td align="left">简写属性，用于把下边框的所有属性设置到一个声明中。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-bottom_color.asp" rel="nofollow">border-bottom-color</a></td> 
   <td align="left">设置元素的下边框的颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-bottom_style.asp" rel="nofollow">border-bottom-style</a></td> 
   <td align="left">设置元素的下边框的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-bottom_width.asp" rel="nofollow">border-bottom-width</a></td> 
   <td align="left">设置元素的下边框的宽度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-left.asp" rel="nofollow">border-left</a></td> 
   <td align="left">简写属性，用于把左边框的所有属性设置到一个声明中。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-left_color.asp" rel="nofollow">border-left-color</a></td> 
   <td align="left">设置元素的左边框的颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-left_style.asp" rel="nofollow">border-left-style</a></td> 
   <td align="left">设置元素的左边框的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-left_width.asp" rel="nofollow">border-left-width</a></td> 
   <td align="left">设置元素的左边框的宽度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-right.asp" rel="nofollow">border-right</a></td> 
   <td align="left">简写属性，用于把右边框的所有属性设置到一个声明中。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-right_color.asp" rel="nofollow">border-right-color</a></td> 
   <td align="left">设置元素的右边框的颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-right_style.asp" rel="nofollow">border-right-style</a></td> 
   <td align="left">设置元素的右边框的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-right_width.asp" rel="nofollow">border-right-width</a></td> 
   <td align="left">设置元素的右边框的宽度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-top.asp" rel="nofollow">border-top</a></td> 
   <td align="left">简写属性，用于把上边框的所有属性设置到一个声明中。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-top_color.asp" rel="nofollow">border-top-color</a></td> 
   <td align="left">设置元素的上边框的颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-top_style.asp" rel="nofollow">border-top-style</a></td> 
   <td align="left">设置元素的上边框的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/cssref/pr_border-top_width.asp" rel="nofollow">border-top-width</a></td> 
   <td align="left">设置元素的上边框的宽度。</td> 
  </tr> 
 </tbody> 
</table>

## 4.4、外边距 ##

margin 清除周围的（外边距）元素区域，margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

![img][img 1]

常用的属性：

## 4.5、外边距合并 ##

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

![CSS 外边距合并实例 1][CSS _ 1]

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

![CSS 外边距合并实例 2][CSS _ 2]

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

![CSS 外边距合并实例 3][CSS _ 3]

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

![CSS 外边距合并实例 4][CSS _ 4]

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

![CSS 外边距合并的实际意义][CSS]

> 注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

# 第五章 CSS显示特性 #

## 5.1、块级元素 ##

**块级元素(block)特性：**

*  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
 *  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

**块级元素主要有：**

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

## 5.2、内联元素 ##

**内联元素(inline)特性：**

*  和相邻的内联元素在同一行
 *  宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

**内联元素主要有：**

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

## 5.3、可变元素 ##

\*\*可变元素主要有：\*\*根据上下文关系确定该元素是块元素还是内联元素

applet ,button ,del ,iframe , ins ,map ,object , script

## 5.4、类别修改 ##

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

*  display:block – 显示为块级元素
 *  display:inline – 显示为内联元素
 *  display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

## 5.5、元素隐藏 ##

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

但两者的区别在于：

*  **display:none** ：使元素在网页上不可见，元素不再占用空间。
 *  **visibility: hidden** ：使元素在网页上不可见，元素仍会占用空间。

# 第六章 CSS定位 #

## 6.1、概述 ##

**CSS 定位和浮动**

CSS 定位 (Positioning) 属性允许你对元素进行定位。

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

**CSS 定位机制**

CSS 有三种基本的定位机制：普通流（相对定位）、绝对定位和浮动定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

**CSS 定位属性**

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">absolute</td> 
   <td align="left">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td> 
  </tr> 
  <tr> 
   <td align="left">fixed</td> 
   <td align="left">生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td> 
  </tr> 
  <tr> 
   <td align="left">relative</td> 
   <td align="left">生成相对定位的元素，相对于其正常位置进行定位。因此，“left: 20” 会向元素的 left 位置添加 20 像素。</td> 
  </tr> 
  <tr> 
   <td align="left">static</td> 
   <td align="left">默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
  </tr> 
  <tr> 
   <td align="left">inherit</td> 
   <td align="left">规定应该从父元素继承 position 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

> 注意：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

## 6.2、相对定位 ##

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative { 
        position: relative;
        left: 30px;
        top: 20px;
    }

如下图所示：

![CSS 相对定位实例][CSS 1]

> 注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

## 6.3、绝对定位 ##

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative { 
        position: absolute;
        left: 30px;
        top: 20px;
    }

如下图所示：

![CSS 绝对定位实例][CSS 2]

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

> 注意：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 [z-index 属性][z-index]来控制这些框的堆放次序。

## 6.4、浮动定位 ##

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

**CSS 浮动演示**

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

![CSS 浮动实例 - 向右浮动的元素][CSS _ -]

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

![CSS 浮动实例 - 向左浮动的元素][CSS _ - 1]

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

![CSS 浮动实例 2 - 向左浮动的元素][CSS _ 2 -]

**CSS 浮动属性**

在 CSS 中，我们通过 float 属性实现元素的浮动。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">left</td> 
   <td align="left">元素向左浮动。</td> 
  </tr> 
  <tr> 
   <td align="left">right</td> 
   <td align="left">元素向右浮动。</td> 
  </tr> 
  <tr> 
   <td align="left">none</td> 
   <td align="left">默认值。元素不浮动，并会显示在其在文本中出现的位置。</td> 
  </tr> 
  <tr> 
   <td align="left">inherit</td> 
   <td align="left">规定应该从父元素继承 float 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

**行框和清理**

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

![行框围绕浮动框][b743de0006db1122205458a010b61556.png]

要想阻止行框围绕浮动框，需要对该框应用 [clear 属性][clear]。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

![clear 属性实例 - 对行框应用 clear][clear _ - _ clear]

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news { 
        background-color: gray;
        border: solid 1px black;
    }
    
    .news img { 
        float: left;
    }
    
    .news p { 
        float: right;
    }
    
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

![clear 属性实例 - 对空元素应用清理][clear _ -]

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

.news { 
        background-color: gray;
        border: solid 1px black;
    }
    
    .news img { 
        float: left;
    }
    
    .news p { 
        float: right;
    }
    
    .clear { 
        clear: both;
    }
    
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
    </div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。不过我们还有另一种办法，那就是对容器 div 进行浮动：

.news { 
        background-color: gray;
        border: solid 1px black;
        float: left;
    }
    
    .news img { 
        float: left;
    }
    
    .news p { 
        float: right;
    }
    
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理，这有助于减少或消除不必要的标记。

# CSS3 #

# 第一章 CSS3概述 #

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。

对CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2。

# 第二章 CSS3边框 #

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需使用设计软件，比如 PhotoShop。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-border-image.html" rel="nofollow">border-image</a></td> 
   <td align="left">设置所有边框图像的速记属性。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-border-radius.html" rel="nofollow">border-radius</a></td> 
   <td align="left">一个用于设置所有四个边框- *-半径属性的速记属性</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-box-shadow.html" rel="nofollow">box-shadow</a></td> 
   <td align="left">附加一个或多个下拉框的阴影</td> 
  </tr> 
 </tbody> 
</table>

# 第三章 CSS3圆角 #

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

# 第四章 CSS3背景 #

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

<table> 
 <thead> 
  <tr> 
   <th align="left">顺序</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-background-clip.html" rel="nofollow">background-clip</a></td> 
   <td align="left">规定背景的绘制区域。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-background-origin.html" rel="nofollow">background-origin</a></td> 
   <td align="left">规定背景图片的定位区域。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-background-size.html" rel="nofollow">background-size</a></td> 
   <td align="left">规定背景图片的尺寸。</td> 
  </tr> 
 </tbody> 
</table>

# 第五章 CSS3渐变 #

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

*  **线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向**
 *  **径向渐变（Radial Gradients）- 由它们的中心定义**

## 5.1、线性渐变 ##

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

**线性渐变 - 从上到下（默认情况下）**

#grad { 
        background-image: linear-gradient(#e66465, #9198e5);
    }

**线性渐变 - 从左到右**

#grad { 
        background-image: linear-gradient(to right, red, yellow);
    }

**线性渐变 - 对角变化**

#grad { 
        background-image: linear-gradient(to bottom right, red, yellow);
    }

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。语法如下：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

![image-20201009180447824][]

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 **90 - x = y** 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

#grad { 
        background-image: linear-gradient(-90deg, red, yellow);
    }

下面的实例演示了如何设置多个颜色节点：

#grad { 
        background-image: linear-gradient(red, yellow, green);
    }

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

#grad { 
        background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad { 
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    }

下面的实例演示了一个重复的线性渐变：

#grad { 
        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

## 5.2、径向渐变 ##

径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

**径向渐变 - 颜色节点均匀分布（默认情况下）**

#grad { 
        background-image: radial-gradient(red, yellow, green);
    }

**径向渐变 - 颜色节点不均匀分布**

#grad { 
        background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    }

**设置形状**

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

形状为圆形的径向渐变：

#grad { 
        background-image: radial-gradient(circle, red, yellow, green);
    }

**不同尺寸大小关键字的使用**

size 参数定义了渐变的大小。它可以是以下四个值：

*  **closest-side**
 *  **farthest-side**
 *  **closest-corner**
 *  **farthest-corner**

带有不同尺寸大小关键字的径向渐变：

#grad1 { 
        background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
    }
    
    #grad2 { 
        background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
    }

**重复的径向渐变**

repeating-radial-gradient() 函数用于重复径向渐变：

#grad { 
        background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
    }

# 第六章 CSS3文本效果 #

CSS3中包含几个新的文本特征。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-hanging-punctuation.html" rel="nofollow">hanging-punctuation</a></td> 
   <td align="left">规定标点字符是否位于线框之外。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-punctuation-trim.html" rel="nofollow">punctuation-trim</a></td> 
   <td align="left">规定是否对标点字符进行修剪。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-align-last.html" rel="nofollow">text-align-last</a></td> 
   <td align="left">设置如何对齐最后一行或紧挨着强制换行符之前的行。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/css3/css3-pr-text-emphasis.html" rel="nofollow">text-emphasis</a></td> 
   <td align="left">向元素的文本应用重点标记以及重点标记的前景色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-justify.html" rel="nofollow">text-justify</a></td> 
   <td align="left">规定当 text-align 设置为 “justify” 时所使用的对齐方法。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-outline.html" rel="nofollow">text-outline</a></td> 
   <td align="left">规定文本的轮廓。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-overflow.html" rel="nofollow">text-overflow</a></td> 
   <td align="left">规定当文本溢出包含元素时发生的事情。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-shadow.html" rel="nofollow">text-shadow</a></td> 
   <td align="left">向文本添加阴影。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-text-wrap.html" rel="nofollow">text-wrap</a></td> 
   <td align="left">规定文本的换行规则。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-word-break.html" rel="nofollow">word-break</a></td> 
   <td align="left">规定非中日韩文本的换行规则。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-word-wrap.html" rel="nofollow">word-wrap</a></td> 
   <td align="left">允许对长的不可分割的单词进行分割并换行到下一行。</td> 
  </tr> 
 </tbody> 
</table>

# 第七章 CSS3字体 #

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 **CSS3**，网页设计师可以使用它/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 **CSS3** 版本有关于 **@font-face** 规则描述。

您"自己的"的字体是在 **CSS3 @font-face** 规则中定义的。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

下表列出了所有的字体描述和里面的@font-face规则定义：

<table> 
 <thead> 
  <tr> 
   <th align="left">描述符</th> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">font-family</td> 
   <td align="left">name</td> 
   <td align="left">必需。规定字体的名称。</td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">URL</td> 
   <td align="left">必需。定义字体文件的 URL。</td> 
  </tr> 
  <tr> 
   <td align="left">font-stretch</td> 
   <td align="left">normal<br>condensed<br>ultra-condensed<br>extra-condensed<br>semi-condensed<br>expanded<br>semi-expanded<br>extra-expanded<br>ultra-expanded</td> 
   <td align="left">可选。定义如何拉伸字体。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td align="left">font-style</td> 
   <td align="left">normal<br>italic<br>oblique</td> 
   <td align="left">可选。定义字体的样式。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td align="left">font-weight</td> 
   <td align="left">normal<br>bold<br>100<br>200<br>300<br>400<br>500<br>600<br>700<br>800<br>900</td> 
   <td align="left">可选。定义字体的粗细。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td align="left">unicode-range</td> 
   <td align="left">unicode-range</td> 
   <td align="left">可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。</td> 
  </tr> 
 </tbody> 
</table>

# 第八章 CSS3 2D 转换 #

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

在本章您将了解2D变换方法：

*  translate()
 *  rotate()
 *  scale()
 *  skew()
 *  matrix()

## 8.1、translate() 方法 ##

![Translate][]

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate(50px, 100px)是从左边元素移动50个像素，并从顶部移动100像素。

div { 
        -webkit-transform: translate(50px, 100px);/*Safari/Chrome浏览器支持*/
        -moz-transform: translate(50px, 100px);/*Firefox浏览器支持*/
        -ms-transform: translate(50px, 100px);/*IE浏览器支持*/
        -o-transform: translate(50px, 100px);/*Opera浏览器支持*/
        transform: translate(50px, 100px);
    }

## 8.2、rotate() 方法 ##

![Rotate][]

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate(30deg)代表元素顺时针旋转30度。

div { 
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
    }

## 8.3、scale() 方法 ##

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

scale(2, 3)转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

div { 
        -webkit-transform: scale(2, 3);
        -moz-transform: scale(2, 3);
        -ms-transform: scale(2, 3);
        -o-transform: scale(2, 3);
        transform: scale(2, 3);
    }

## 8.4、skew() 方法 ##

skew() 方法包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skew(30deg, 20deg)元素在X轴和Y轴上倾斜20度30度。

div { 
        -webkit-transform: skew(30deg, 20deg);
        -moz-transform: skew(30deg, 20deg);
        -ms-transform: skew(30deg, 20deg);
        -o-transform: skew(30deg, 20deg);
        transform: skew(30deg, 20deg);
    }

## 8.5、matrix() 方法 ##

![Rotate][Rotate 1]

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div { 
        -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        -ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        -o-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
    }

**2D 转换属性**

**2D 转换方法**

<table> 
 <thead> 
  <tr> 
   <th align="left">函数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">matrix(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td align="left">定义 2D 转换，使用六个值的矩阵。</td> 
  </tr> 
  <tr> 
   <td align="left">translate(<em>x</em>,<em>y</em>)</td> 
   <td align="left">定义 2D 转换，沿着 X 和 Y 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td align="left">translateX(<em>n</em>)</td> 
   <td align="left">定义 2D 转换，沿着 X 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td align="left">translateY(<em>n</em>)</td> 
   <td align="left">定义 2D 转换，沿着 Y 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td align="left">scale(<em>x</em>,<em>y</em>)</td> 
   <td align="left">定义 2D 缩放转换，改变元素的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td align="left">scaleX(<em>n</em>)</td> 
   <td align="left">定义 2D 缩放转换，改变元素的宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">scaleY(<em>n</em>)</td> 
   <td align="left">定义 2D 缩放转换，改变元素的高度。</td> 
  </tr> 
  <tr> 
   <td align="left">rotate(<em>angle</em>)</td> 
   <td align="left">定义 2D 旋转，在参数中规定角度。</td> 
  </tr> 
  <tr> 
   <td align="left">skew(<em>x-angle</em>,<em>y-angle</em>)</td> 
   <td align="left">定义 2D 倾斜转换，沿着 X 和 Y 轴。</td> 
  </tr> 
  <tr> 
   <td align="left">skewX(<em>angle</em>)</td> 
   <td align="left">定义 2D 倾斜转换，沿着 X 轴。</td> 
  </tr> 
  <tr> 
   <td align="left">skewY(<em>angle</em>)</td> 
   <td align="left">定义 2D 倾斜转换，沿着 Y 轴。</td> 
  </tr> 
 </tbody> 
</table>

# 第九章 CSS3 3D 转换 #

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

*  rotateX()
 *  rotateY()

## 9.1、rotateX() 方法 ##

![Rotate X][]

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

div { 
        -webkit-transform: rotateX(120deg);
        -moz-transform: rotateX(120deg);
        -ms-transform: rotateX(120deg);
        -o-transform: rotateX(120deg);
        transform: rotateX(120deg);
    }

## 9.2、rotateY() 方法 ##

![Rotate Y][]

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

div { 
        -webkit-transform: rotateY(120deg);
        -moz-transform: rotateY(120deg);
        -ms-transform: rotateY(120deg);
        -o-transform: rotateY(120deg);
        transform: rotateY(120deg);
    }

**3D 转换属性**

**3D 转换方法**

<table> 
 <thead> 
  <tr> 
   <th align="left">函数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">matrix3d(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>, <em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td align="left">定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
  </tr> 
  <tr> 
   <td align="left">translate3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td align="left">定义 3D 转化。</td> 
  </tr> 
  <tr> 
   <td align="left">translateX(<em>x</em>)</td> 
   <td align="left">定义 3D 转化，仅使用用于 X 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">translateY(<em>y</em>)</td> 
   <td align="left">定义 3D 转化，仅使用用于 Y 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">translateZ(<em>z</em>)</td> 
   <td align="left">定义 3D 转化，仅使用用于 Z 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">scale3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td align="left">定义 3D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td align="left">scaleX(<em>x</em>)</td> 
   <td align="left">定义 3D 缩放转换，通过给定一个 X 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">scaleY(<em>y</em>)</td> 
   <td align="left">定义 3D 缩放转换，通过给定一个 Y 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">scaleZ(<em>z</em>)</td> 
   <td align="left">定义 3D 缩放转换，通过给定一个 Z 轴的值。</td> 
  </tr> 
  <tr> 
   <td align="left">rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)</td> 
   <td align="left">定义 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td align="left">rotateX(<em>angle</em>)</td> 
   <td align="left">定义沿 X 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td align="left">rotateY(<em>angle</em>)</td> 
   <td align="left">定义沿 Y 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td align="left">rotateZ(<em>angle</em>)</td> 
   <td align="left">定义沿 Z 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td align="left">perspective(<em>n</em>)</td> 
   <td align="left">定义 3D 转换元素的透视视图。</td> 
  </tr> 
 </tbody> 
</table>

# 第十章 CSS3过渡 #

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

*  指定要添加效果的CSS属性
 *  指定效果的持续时间

应用于宽度属性的过渡效果，时长为 2 秒：

div { 
        width: 100px;
        height: 100px;
        background: red;
        
        -webkit-transition: width 2s;
        -moz-transition: width 2s;
        -ms-transition: width 2s;
        -o-transition: width 2s;
        transition: width 2s;
    }

> 注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div:hover { 
        width: 300px;
    }

> 注意：当鼠标光标移动到该元素时，它逐渐改变它原有样式。

要添加多个样式的变换效果，添加的属性由逗号分隔：

div { 
        width: 100px;
        height: 100px;
        background: red;
        
        -webkit-transition: width 2s, height 2s;
        -moz-transition: width 2s, height 2s;
        -ms-transition: width 2s, height 2s;
        -o-transition: width 2s, height 2s;
        transition: width 2s, height 2s;
    }
    
    div:hover { 
        width: 300px;
        height: 300px;
    }

**过渡属性**

# 第十一章 CSS3动画 #

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 **@keyframes** 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

*  规定动画的名称
 *  规定动画的时长

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

@keyframes myfirst { 
        0% { background: red;}
        25% { background: yellow;}
        50% { background: blue;}
        100% { background: green;}
    }
    
    @-webkit-keyframes myfirst { 
        0% { background: red;}
        25% { background: yellow;}
        50% { background: blue;}
        100% { background: green;}
    }
    
    @-moz-keyframes myfirst { 
        0% { background: red;}
        25% { background: yellow;}
        50% { background: blue;}
        100% { background: green;}
    }
    
    @-ms-keyframes myfirst { 
        0% { background: red;}
        25% { background: yellow;}
        50% { background: blue;}
        100% { background: green;}
    }
    
    @-o-keyframes myfirst { 
        0% { background: red;}
        25% { background: yellow;}
        50% { background: blue;}
        100% { background: green;}
    }
    
    div { 
        width: 300px;
        height: 300px;
        background: black;
    
        -webkit-animation: myfirst 5s;
        -o-animation: myfirst 5s;
        animation: myfirst 5s;
    }

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

**动画属性**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-keyframes.html" rel="nofollow">@keyframes</a></td> 
   <td align="left">规定动画。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation.html" rel="nofollow">animation</a></td> 
   <td align="left">所有动画属性的简写属性。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-name.html" rel="nofollow">animation-name</a></td> 
   <td align="left">规定 @keyframes 动画的名称。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-duration.html" rel="nofollow">animation-duration</a></td> 
   <td align="left">规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-timing-function.html" rel="nofollow">animation-timing-function</a></td> 
   <td align="left">规定动画的速度曲线。默认是 “ease”。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-fill-mode.html" rel="nofollow">animation-fill-mode</a></td> 
   <td align="left">规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-delay.html" rel="nofollow">animation-delay</a></td> 
   <td align="left">规定动画何时开始。默认是 0。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-iteration-count.html" rel="nofollow">animation-iteration-count</a></td> 
   <td align="left">规定动画被播放的次数。默认是 1。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-direction.html" rel="nofollow">animation-direction</a></td> 
   <td align="left">规定动画是否在下一周期逆向地播放。默认是 “normal”。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-animation-play-state.html" rel="nofollow">animation-play-state</a></td> 
   <td align="left">规定动画是否正在运行或暂停。默认是 “running”。</td> 
  </tr> 
 </tbody> 
</table>

# 第十二章 CSS3多列 #

CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例：

![image-20201010100040293][]

下表列出了所有 CSS3 的多列属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-count.html" rel="nofollow">column-count</a></td> 
   <td align="left">指定元素应该被分割的列数。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-fill.html" rel="nofollow">column-fill</a></td> 
   <td align="left">指定如何填充列。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-gap.html" rel="nofollow">column-gap</a></td> 
   <td align="left">指定列与列之间的间隙。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-rule.html" rel="nofollow">column-rule</a></td> 
   <td align="left">所有 column-rule-* 属性的简写。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-color.html" rel="nofollow">column-rule-color</a></td> 
   <td align="left">指定两列间边框的颜色。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-style.html" rel="nofollow">column-rule-style</a></td> 
   <td align="left">指定两列间边框的样式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-width.html" rel="nofollow">column-rule-width</a></td> 
   <td align="left">指定两列间边框的厚度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-span.html" rel="nofollow">column-span</a></td> 
   <td align="left">指定元素要跨越多少列。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-column-width.html" rel="nofollow">column-width</a></td> 
   <td align="left">指定列的宽度。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-columns.html" rel="nofollow">columns</a></td> 
   <td align="left">column-width 与 column-count 的简写属性。</td> 
  </tr> 
 </tbody> 
</table>

# 第十三章 CSS3用户界面 #

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

在本章中，您将了解以下的用户界面属性：

*  resize
 *  box-sizing
 *  outline-offset

## 13.1、调整尺寸(resize) ##

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

由用户指定一个div元素尺寸大小：

div { 
        width: 300px;
        height: 300px;
        background: red;
        /*div右下角会多出一个小三角*/
        resize: both;
        overflow: auto;
    }

## 13.2、方框大小调整(box-sizing) ##

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

规定两个并排的带边框方框：

div { 
        width: 300px;
        height: 300px;
        background: red;
    
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

## 13.3、外形修饰(outline-offset) ##

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

*  轮廓不占用空间
 *  轮廓可能是非矩形

div { 
        width: 300px;
        height: 300px;
        background: red;
    
        border: 2px solid black;
        outline: 2px solid blue;
        outline-offset: 15px;
    }

## 13.4、新的用户界面特性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-resize.html" rel="nofollow">resize</a></td> 
   <td align="left">指定一个元素是否是由用户调整大小。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-box-sizing.html" rel="nofollow">box-sizing</a></td> 
   <td align="left">允许你以适应区域而用某种方式定义某些元素。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-outline-offset.html" rel="nofollow">outline-offset</a></td> 
   <td align="left">外轮廓修饰并绘制超出边框的边缘。</td> 
  </tr> 
 </tbody> 
</table>

# 第十四章 CSS3弹性盒子 #

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

> 注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

下表列出了在弹性盒子中常用到的属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/pr-class-display.html" rel="nofollow">display</a></td> 
   <td align="left">指定 HTML 元素盒子类型。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-flex-direction.html" rel="nofollow">flex-direction</a></td> 
   <td align="left">指定了弹性容器中子元素的排列方式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-justify-content.html" rel="nofollow">justify-content</a></td> 
   <td align="left">设置弹性盒子元素在主轴（横轴）方向上的对齐方式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-align-items.html" rel="nofollow">align-items</a></td> 
   <td align="left">设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-flex-wrap.html" rel="nofollow">flex-wrap</a></td> 
   <td align="left">设置弹性盒子的子元素超出父容器时是否换行。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-align-content.html" rel="nofollow">align-content</a></td> 
   <td align="left">修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-flex-flow.html" rel="nofollow">flex-flow</a></td> 
   <td align="left">flex-direction 和 flex-wrap 的简写。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-order.html" rel="nofollow">order</a></td> 
   <td align="left">设置弹性盒子的子元素排列顺序。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-align-self.html" rel="nofollow">align-self</a></td> 
   <td align="left">在弹性子元素上使用。覆盖容器的 align-items 属性。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/cssref/css3-pr-flex.html" rel="nofollow">flex</a></td> 
   <td align="left">设置弹性盒子的子元素如何分配空间。</td> 
  </tr> 
 </tbody> 
</table>

# 第十五章 CSS3多媒体大小 #

## 15.1、多媒体概述 ##

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。媒体查询可用于检测很多事情，例如：

*  viewport(视窗) 的宽度与高度
 *  设备的宽度与高度
 *  朝向 (智能手机横屏，竖屏) 。
 *  分辨率

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) { 
        CSS 代码...;
    }

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

*  **not:** not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
 *  **only:** 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
 *  **all:** 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

## 15.2、多媒体类型 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">all</td> 
   <td align="left">用于所有多媒体类型设备</td> 
  </tr> 
  <tr> 
   <td align="left">print</td> 
   <td align="left">用于打印机</td> 
  </tr> 
  <tr> 
   <td align="left">screen</td> 
   <td align="left">用于电脑屏幕，平板，智能手机等。</td> 
  </tr> 
  <tr> 
   <td align="left">speech</td> 
   <td align="left">用于屏幕阅读器</td> 
  </tr> 
 </tbody> 
</table>

## 15.3、多媒体功能 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">aspect-ratio</td> 
   <td align="left">定义输出设备中的页面可见区域宽度与高度的比率</td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0</td> 
  </tr> 
  <tr> 
   <td align="left">color-index</td> 
   <td align="left">定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0</td> 
  </tr> 
  <tr> 
   <td align="left">device-aspect-ratio</td> 
   <td align="left">定义输出设备的屏幕可见宽度与高度的比率。</td> 
  </tr> 
  <tr> 
   <td align="left">device-height</td> 
   <td align="left">定义输出设备的屏幕可见高度。</td> 
  </tr> 
  <tr> 
   <td align="left">device-width</td> 
   <td align="left">定义输出设备的屏幕可见宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">grid</td> 
   <td align="left">用来查询输出设备是否使用栅格或点阵。</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">定义输出设备中的页面可见区域高度。</td> 
  </tr> 
  <tr> 
   <td align="left">max-aspect-ratio</td> 
   <td align="left">定义输出设备的屏幕可见宽度与高度的最大比率。</td> 
  </tr> 
  <tr> 
   <td align="left">max-color</td> 
   <td align="left">定义输出设备每一组彩色原件的最大个数。</td> 
  </tr> 
  <tr> 
   <td align="left">max-color-index</td> 
   <td align="left">定义在输出设备的彩色查询表中的最大条目数。</td> 
  </tr> 
  <tr> 
   <td align="left">max-device-aspect-ratio</td> 
   <td align="left">定义输出设备的屏幕可见宽度与高度的最大比率。</td> 
  </tr> 
  <tr> 
   <td align="left">max-device-height</td> 
   <td align="left">定义输出设备的屏幕可见的最大高度。</td> 
  </tr> 
  <tr> 
   <td align="left">max-device-width</td> 
   <td align="left">定义输出设备的屏幕最大可见宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">max-height</td> 
   <td align="left">定义输出设备中的页面最大可见区域高度。</td> 
  </tr> 
  <tr> 
   <td align="left">max-monochrome</td> 
   <td align="left">定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。</td> 
  </tr> 
  <tr> 
   <td align="left">max-resolution</td> 
   <td align="left">定义设备的最大分辨率。</td> 
  </tr> 
  <tr> 
   <td align="left">max-width</td> 
   <td align="left">定义输出设备中的页面最大可见区域宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">min-aspect-ratio</td> 
   <td align="left">定义输出设备中的页面可见区域宽度与高度的最小比率。</td> 
  </tr> 
  <tr> 
   <td align="left">min-color</td> 
   <td align="left">定义输出设备每一组彩色原件的最小个数。</td> 
  </tr> 
  <tr> 
   <td align="left">min-color-index</td> 
   <td align="left">定义在输出设备的彩色查询表中的最小条目数。</td> 
  </tr> 
  <tr> 
   <td align="left">min-device-aspect-ratio</td> 
   <td align="left">定义输出设备的屏幕可见宽度与高度的最小比率。</td> 
  </tr> 
  <tr> 
   <td align="left">min-device-width</td> 
   <td align="left">定义输出设备的屏幕最小可见宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">min-device-height</td> 
   <td align="left">定义输出设备的屏幕的最小可见高度。</td> 
  </tr> 
  <tr> 
   <td align="left">min-height</td> 
   <td align="left">定义输出设备中的页面最小可见区域高度。</td> 
  </tr> 
  <tr> 
   <td align="left">min-monochrome</td> 
   <td align="left">定义在一个单色框架缓冲区中每像素包含的最小单色原件个数</td> 
  </tr> 
  <tr> 
   <td align="left">min-resolution</td> 
   <td align="left">定义设备的最小分辨率。</td> 
  </tr> 
  <tr> 
   <td align="left">min-width</td> 
   <td align="left">定义输出设备中的页面最小可见区域宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">monochrome</td> 
   <td align="left">定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</td> 
  </tr> 
  <tr> 
   <td align="left">orientation</td> 
   <td align="left">定义输出设备中的页面可见区域高度是否大于或等于宽度。</td> 
  </tr> 
  <tr> 
   <td align="left">resolution</td> 
   <td align="left">定义设备的分辨率。如：96dpi, 300dpi, 118dpcm</td> 
  </tr> 
  <tr> 
   <td align="left">scan</td> 
   <td align="left">定义电视类设备的扫描工序。</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">定义输出设备中的页面可见区域宽度。</td> 
  </tr> 
 </tbody> 
</table>

## 15.4、多媒体实例 ##

以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色：

@media screen and (max-width: 480px) { 
        body { 
            background-color: lightgreen;
        }
    }

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

@media screen and (min-width: 480px) { 
        #leftsidebar { width: 200px; float: left;}
        #main { margin-left:216px;}
    }

[image-20201008080305093]: /images/20221123/4fac689d06e64b47829d11339575518f.png
[CSS box-model]: /images/20221123/1dc18c2c67944bac8c67a6a823d76f59.png
[image-20201008214738875]: /images/20221123/20fb89c535d94facb8f2473356fd30f7.png
[img]: /images/20221123/d658e3a1177f492a828aee15ec2b8855.png
[img 1]: /images/20221123/82c9a64e357d4affb9e0f49f96683115.png
[CSS _ 1]: /images/20221123/ed27620248a447639bf6f64b8ab0f644.png
[CSS _ 2]: /images/20221123/cf870cd3e94c463d96be5b515ce8f3a6.png
[CSS _ 3]: /images/20221123/ce7877e720d143afb45628b7af988696.png
[CSS _ 4]: /images/20221123/f0e2f7382dab4c7b99796892ee7bb56c.png
[CSS]: /images/20221123/1a2b008fca2d499e8e6e01a2a51d50ae.png
[CSS 1]: /images/20221123/4d8a54d497864d9a9263520905f8aa36.png
[CSS 2]: /images/20221123/d976e42c9be94bbb8ac58732b2269c50.png
[z-index]: https://www.w3school.com.cn/cssref/pr_pos_z-index.asp
[CSS _ -]: /images/20221123/eae1206b28f54ba588514513320b7356.png
[CSS _ - 1]: /images/20221123/df3e813a8519450e9a9e77aece36701e.png
[CSS _ 2 -]: /images/20221123/3ed4641c683744c5820c5d732cb91d45.png
[b743de0006db1122205458a010b61556.png]: /images/20221123/3a70fa91e0db41ffb11fbc57a220cf3b.png
[clear]: https://www.w3school.com.cn/cssref/pr_class_clear.asp
[clear _ - _ clear]: /images/20221123/18bfab4219314db28325ef7aa26604b2.png
[clear _ -]: /images/20221123/d641ef0e6ba04db79fb72e809e767b27.png
[image-20201009180447824]: /images/20221123/e93401ac7cf54fa99b172217888536ba.png
[Translate]: /images/20221123/00708e3615194ef7a2e6219f18988628.png
[Rotate]: /images/20221123/a1d0ef4924294010846a41485480e040.png
[Rotate 1]: /images/20221123/466788ea9d2e4dc3a3b488e23d640545.png
[Rotate X]: /images/20221123/167ed02cbe5b4316923d0abc02ef48e6.png
[Rotate Y]: /images/20221123/a76523ec552140b5b5bfaa703a2fe9d3.png
[image-20201010100040293]: /images/20221123/102bda16dd634b90bc6c05715fd5b043.png