CSS3新特性详细介绍

女爷i 2023-07-15 02:44 4阅读 0赞

文章内容持续更新中~

### 文章目录 ###

*   *  一、CSS3实现圆角 - border-radius
     *  二、盒子阴影 - box-shadow
     *  三、文本阴影 - text-shadow
     *  四、渐变 - gradient
     *   *   *  linear-gradient() 线性渐变
             *  radial-gradient() 径向渐变
     *  五、变化 - transform
     *   *   *  translate - 定义2D转换
             *  translate3d - 定义3D转换
             *  translateX - 转换X轴
             *  translateY - 转换Y轴
             *  translateZ - 定义3D转换，转换Z轴
             *  scale - 定义2D缩放
             *  scale3d - 定义3D缩放
             *  scaleX - 通过设置X轴的值来定义缩放
             *  scaleY - 通过设置Y轴的值来定义缩放
             *  scaleZ - 通过设置Z轴的值来定义3D缩放
             *  rotate - 定义2D旋转
             *  rotate3d - 定义3D旋转
             *  rotateX - 定义沿着X轴的3D旋转
             *  rotateY - 定义沿着Y轴的3D旋转
             *  rotateZ - 定义沿着Z轴的3D旋转
             *  skew - 定义沿着X和Y轴的2D倾斜
             *  skewX - 定义沿着X轴的2D倾斜
             *  skewY - 定义沿着Y轴的2D倾斜
             *  perspective - 为3D转换元素定义透明视图
             *  matrix - 定义2D转换，使用六个值的矩阵
             *  matrix3d - 定义3D转换，使用16个值的4\*4矩阵
     *  六、增加了更多css伪类选择器
     *   *   *  ：not选择器
             *  ：empty选择器
             *  ：root选择器
             *  ：target选择器
             *  ：selection选择器
             *  以下的选择器的说明介绍里有个词叫“一组”。它的意思就是同一父元素下的所有元素及文本节点，即为一组。
             *  ：nth-of-type(n)
             *  ：nth-last-of-type(n)
             *  ：first-of-type
             *  ：last-of-type
             *  ：only-of-type
             *  ：only-child
             *  ：nth-child()
             *  ：nth-last-child()
             *  ：enabled、：disabled
             *  ：checked
             *  选择器参数详细介绍：
     *  七、新增的CSS3选择器
     *   *   *  element1~element2选择器
             *  \[attribute\*=value\]选择器
             *  \[attribute^=value\]选择器
             *  \[attribute$=value\]选择器
     *  八、多背景、rgba、hsl
     *   *   *  1.多背景及背景属性
             *  2.rgba
     *  九、border-image
     *  十、多媒体查询
     *  十一、多列布局
     *  十二、Animation
     *   *   *  animation属性：
             *  @keyframes规则：
     *  十三、Transition
     *  十四、Word-wrap
     *  十五、Text-overflow
     *  十六、Word-break
     *  十七、Flex弹性盒
     *  十八、@font-face
     *  关于查看使用的CSS3属性的兼容情况：
     *  兼容写法介绍：

## 一、CSS3实现圆角 - border-radius ##

> 给一个值的时候默认是四个角都进行圆角处理。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]

> 如果给四个值的话则按照笔者标注的顺序进行圆角处理。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]

> 设置俩个值的时候第一个值对应的是1和3，第二个值对应的是2和4。设置三个值的时候第一个值对应的是1，第二个值对应的是2和4，第三个值对应的是3。

> 这个值也可以给百分比和其他的单位，并不局限为px。比如说我们想画个圆，那简直太简单了。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]

## 二、盒子阴影 - box-shadow ##

> 给大家分享我自己对盒子阴影的理解，就是我们所有的块级元素、行内块元素【可以设置宽高的】，在他们本身的下面其实是有一个我们看不见的另外一个盒子【我喜欢把它当做影子】。然后box-shadow这个属性就是用来操控影子的样式的！

盒子阴影的参数如下：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
   <th>吴迪自己的理解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h-shadow</td> 
   <td>必需的，水平阴影的位置，可以负值</td> 
   <td>控制影子的x轴位置</td> 
  </tr> 
  <tr> 
   <td>v-shadow</td> 
   <td>必需的，垂直阴影的位置，可以负值</td> 
   <td>控制影子的y轴位置</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>可选，模糊距离</td> 
   <td>控制影子的模糊度</td> 
  </tr> 
  <tr> 
   <td>spread</td> 
   <td>可选，阴影大小</td> 
   <td>控制影子边框的大小</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>可选，阴影颜色</td> 
   <td>控制影子的颜色</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>可选，从外层的阴影（开始时）改变阴影内侧阴影</td> 
   <td>控制影子在里面还是在外面</td> 
  </tr> 
 </tbody> 
</table>

使用时的语法：

box-shadow: h-shadow v-shadow blur spread color inset;

简单示例：

> 说明：如果h-shadow与v-shadow是正值，那就是向右和向下平移，如果是负值那就是向左和向上平移。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]

> 如果加入inset值的话h-shadow与v-shadow就略微改变了一下，【吴小迪个人理解：加入了inset值之后就将阴影盒子的z-index值提升到了无限大，所以会优先于我们本身的盒子显示，但是又被我们本身的盒子所局限，超出的部分不显示。】我们可以举俩个例子：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]

卡片效果：  
[https://www.runoob.com/try/try.php?filename=trycss3\_box-shadow4][https_www.runoob.com_try_try.php_filename_trycss3_box-shadow4]  
[https://www.runoob.com/try/try.php?filename=trycss3\_box-shadow5][https_www.runoob.com_try_try.php_filename_trycss3_box-shadow5]

> 其他的值自己测试即可，我个人认为按照我的个人理解看起来就已经很直白了。你只需要按照你的需求去改变影子的样式即可。

## 三、文本阴影 - text-shadow ##

文本阴影比盒子阴影学起来简单一些，但是没有盒子阴影强大，因为他的可控制影子的属性变少了。

> text-shadow属性可以接受一个以逗号分割的阴影效果列表，并应用到该元素的文本上。阴影效果按照顺序应用，因此他有可能出现互相覆盖，但是他们永远不会覆盖文本本身。阴影效果不会改变框的尺寸，但有可能延伸到它的边界之外。阴影效果的堆叠层次和元素本身的层次是一样的。

文本阴影的参数如下：

> 与笔者在上面理解的盒子阴影是一样的，请自行测试效果。需要额外注意的是IE 9及更早版本的浏览器不支持 text-shadow 属性。

> 借助阴影效果的列表机制我们可以叠加出一个燃烧的文字特效：

![在这里插入图片描述][20200320214859497.png]

<!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } header { background: #000; text-align: center; font-weight: bold; font-size: 60px; font-family: arial, sans-serif; color: brown; text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; height: 140px; line-height: 140px; } </style>
    </head>
    <body>
        <header>吴小迪</header>
    </body>
    </html>

> 更多text-shadow特效请观看：[text-shadow好看效果展示及讲解][text-shadow]

## 四、渐变 - gradient ##

#### linear-gradient() 线性渐变 ####

线性渐变函数的参数如下：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
   <th>可能值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>direction</td> 
   <td>用角度值指定渐变的方向（或角度）【默认是自上向下】</td> 
   <td>to left、to right、to top 、to bottom、to 左右和上下的组合【谁放在前面都可以】、角度【deg】</td> 
  </tr> 
  <tr> 
   <td>color-stop1, color-stop2,…</td> 
   <td>用于指定渐变的起止颜色</td> 
   <td>颜色</td> 
  </tr> 
 </tbody> 
</table>

语法：

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

简单示例：

> 默认方向：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 6]

> 设置方向：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 7]

> 设置角度：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 8]  
> 从上面这个小例子我们了解到了，当我们设置角度的时候起点始终都是自上向下。当给出正值的时候就是顺时针旋转，当给出负值的时候就是逆时针旋转。

#### radial-gradient() 径向渐变 ####

径向渐变函数的参数如下：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
   <th>可能值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>shape</td> 
   <td>确定圆的形状</td> 
   <td>ellipse【默认】：指定椭圆形的径向渐变；circle：指定圆形的径向渐变；</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>定义渐变的大小</td> 
   <td><p>1. farthest-corner【默认】：指定径向半径长度为从圆心到离圆心最远的角;<br>2.closest-side:指定径向渐变的半径长度为圆心到离圆心最近的边；<br>3.closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角；<br>4.farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；</p></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>定义渐变的位置</td> 
   <td><p>1.center【默认】：设置中间为径向渐变圆心的纵坐标值。<br>2.top:设置顶部为径向渐变圆心的纵坐标值。<br>3.bottom：设置底部为径向渐变圆心的纵坐标值。</p></td> 
  </tr> 
  <tr> 
   <td>start-color, …, last-color</td> 
   <td>用于指定渐变的起止颜色</td> 
   <td>颜色</td> 
  </tr> 
 </tbody> 
</table>

具体使用请自行实验，可以到菜鸟教程跟着教程玩一遍：[https://www.runoob.com/cssref/func-radial-gradient.html][https_www.runoob.com_cssref_func-radial-gradient.html]

## 五、变化 - transform ##

#### translate - 定义2D转换 ####

#### translate3d - 定义3D转换 ####

#### translateX - 转换X轴 ####

#### translateY - 转换Y轴 ####

#### translateZ - 定义3D转换，转换Z轴 ####

#### scale - 定义2D缩放 ####

#### scale3d - 定义3D缩放 ####

#### scaleX - 通过设置X轴的值来定义缩放 ####

#### scaleY - 通过设置Y轴的值来定义缩放 ####

#### scaleZ - 通过设置Z轴的值来定义3D缩放 ####

#### rotate - 定义2D旋转 ####

#### rotate3d - 定义3D旋转 ####

#### rotateX - 定义沿着X轴的3D旋转 ####

#### rotateY - 定义沿着Y轴的3D旋转 ####

#### rotateZ - 定义沿着Z轴的3D旋转 ####

#### skew - 定义沿着X和Y轴的2D倾斜 ####

#### skewX - 定义沿着X轴的2D倾斜 ####

#### skewY - 定义沿着Y轴的2D倾斜 ####

#### perspective - 为3D转换元素定义透明视图 ####

#### matrix - 定义2D转换，使用六个值的矩阵 ####

#### matrix3d - 定义3D转换，使用16个值的4\*4矩阵 ####

> 关于transform的全部效果请看：[https://c.runoob.com/codedemo/3391][https_c.runoob.com_codedemo_3391]。  
> 笔者后面抽时间绝对会仔细的讲每一个属性的作用。

## 六、增加了更多css伪类选择器 ##

#### ：not选择器 ####

他有一个非常有意思的民间叫法：不自信选择器。他后面加入谁的话，那么除了他之外其他的元素都会应用样式。

举例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 9]

#### ：empty选择器 ####

选择每个没有任何子级的元素（包括文本节点）。

> 注意：即使有空格也算是文本节点

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 10]

#### ：root选择器 ####

匹配文档的根元素。  
在HTML中根元素始终是HTML元素。

#### ：target选择器 ####

> ＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。  
> :target选择器可用于当前活动的target元素的样式。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 11]

#### ：selection选择器 ####

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。

> 注意：  
> ::selection只可以应用于少数的CSS属性：color, background, cursor,和outline。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 12]

> **使用selection更改样式后:**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 13]

#### 以下的选择器的说明介绍里有个词叫“一组”。它的意思就是同一父元素下的所有元素及文本节点，即为一组。 ####

#### ：nth-of-type(n) ####

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

> 说明：  
> n可以是一个数字，一个关键字，或者一个公式。  
> 参数详细介绍请点击：选择器参数详细介绍

示例：

/* 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色： */
    p:nth-of-type(2) { 
    	background:#ff0000;
    }

#### ：nth-last-of-type(n) ####

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

> 说明：  
> n可以是一个数字，一个关键字，或者一个公式。  
> 参数详细介绍请点击：选择器参数详细介绍

示例：

/* 指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色： */
    p:nth-last-of-type(2) { 
    	background:#ff0000;
    }

#### ：first-of-type ####

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。

> 小知识：  
> first-of-type与nth-of-type(1) 是一个意思

示例：

/* 一组同级元素中的第一个p元素 */
    p:first-of-type { }

#### ：last-of-type ####

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。

> 小知识：  
> last-of-type与nth-last-of-type(1) 是一个意思

示例：

/* 一组同级元素中的最后一个p元素 */
    p:last-of-type { }

#### ：only-of-type ####

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

示例：

/* 一组同级元素中的唯一一个p元素 */
    p:only-of-type { }

#### ：only-child ####

匹配属于父元素中唯一子元素的元素。

示例：

/* 选择属于其父元素的 唯一一个子元素是p的元 素的p元素【样式是应用 到p元素上面的】 */
    p:only-child { }

#### ：nth-child() ####

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

> 说明：  
> n 可以是一个数字，一个关键字，或者一个公式。  
> 参数详细介绍请点击：选择器参数详细介绍

示例：

/* 选择属于其父元素的第二个子元素的每个p元素 */
    p:nth-child(2) { }

#### ：nth-last-child() ####

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

> 说明：  
> n 可以是一个数字，一个关键字，或者一个公式。  
> 参数详细介绍请点击：选择器参数详细介绍

示例：

/* 选择属于其父元素的倒数第二个子元素的每个p元素 */
    p:nth-last-child(2)

#### ：enabled、：disabled ####

> disabled控制禁用元素的样式。  
> enabled控制激活元素的样式。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 14]

#### ：checked ####

匹配每个选中的输入元素（仅适用于单选按钮或复选框）。  
示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 15]

#### 选择器参数详细介绍： ####

> 数字：1，2，3，4，5，… …  
> 关键字：odd，even。 【odd是单数，even是双数】  
> 公式：(an+ b),(an-b)。【a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。】  
> 关于公式的示例：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 16]

## 七、新增的CSS3选择器 ##

#### element1~element2选择器 ####

element1~element2 选择器匹配出现在 element1 后面的 element2。

> 注意：  
> element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 17]

#### \[attribute\*=value\]选择器 ####

\[attribute\*=value\] 选择器匹配元素属性值包含指定值的元素。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 18]

#### \[attribute^=value\]选择器 ####

\[attribute^=value\] 选择器匹配元素属性值带指定的值开始的元素。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 19]

#### \[attribute$=value\]选择器 ####

\[attribute$=value\] 选择器匹配元素属性值带指定的值结尾的元素。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 20]

## 八、多背景、rgba、hsl ##

#### 1.多背景及背景属性 ####

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-image</td> 
   <td>添加背景图片，可以放多张，用逗号隔开</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>控制背景图的大小</td> 
  </tr> 
  <tr> 
   <td>background-origin</td> 
   <td>指定背景图像的位置区域</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>指定背景图从什么位置开始绘制</td> 
  </tr> 
 </tbody> 
</table>

小示例：

> 设置多背景图：  
> 我们可以看到，当我们设置俩张背景图的时候我们中间用逗号隔开即可。我们想要控制他们的其他属性的时候也是按照顺序用逗号隔开，如果俩个背景图都想要repeat，那么就写一个就可以了，可以省略第二个。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 21]  
> 如果想要在background属性里面简写的话语法如下：
> 
>     #example1 { 
>        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
>     }

> 控制背景图大小：  
> 这个很简单，笔者不做示例了，只是简单介绍一下。  
> 我们设置背景图大小可以给固定宽高，也可以给百分比。也可以设置一些可能值。  
> 设置固定宽高和百分之的语法如下：
> 
>     background-size:width height;
> 
> 其他的可能值：  
> ![在这里插入图片描述][20200316080352382.png]

> 设置背景图的位置区域：  
> 在学习如何设置背景图的位置区域的时候大家可能需要了解一下border、padding、content【content就是width和height】。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 22]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 23]

> 规定背景的开始绘制区域【默认是从boder区域开始】：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 24]

#### 2.rgba ####

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

> 小知识点：  
> opacity透明子元素会跟着透明（继承），rgba()的透明子元素则不会继承。

参数介绍：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>红色(R)</td> 
   <td>0 到 255 间的整数，代表颜色中的红色成分。</td> 
  </tr> 
  <tr> 
   <td>绿色(G)</td> 
   <td>0 到 255 间的整数，代表颜色中的绿色成分。</td> 
  </tr> 
  <tr> 
   <td>蓝色(B)</td> 
   <td>0 到 255 间的整数，代表颜色中的蓝色成分。</td> 
  </tr> 
  <tr> 
   <td>透明度(A)</td> 
   <td>取值 0~1 之间， 代表透明度。</td> 
  </tr> 
 </tbody> 
</table>

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 25]

## 九、border-image ##

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

省略不写的值设置为它们的默认值。

**默认值：**  
`none 100% 1 0 stretch`

**语法：**

border-image: source slice width outset repeat|initial|inherit;

**参数介绍**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>吴小迪土话翻译</th> 
   <th>注意点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-image-source</td> 
   <td>用于指定要用户绘制边框的图像的位置</td> 
   <td>你要设置的图片的url</td> 
   <td>如果值是"none"，或者无法显示图像，边框样式会被使用。</td> 
  </tr> 
  <tr> 
   <td>border-image-slice</td> 
   <td>图像边界向内偏移</td> 
   <td>请看吴小迪专门介绍的文章：<a href="https://wudi98.blog.csdn.net/article/details/104940881" rel="nofollow">border-image-slice介绍</a></td> 
   <td>此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字fill。</td> 
  </tr> 
  <tr> 
   <td>border-image-width</td> 
   <td>图像边界的宽度</td> 
   <td>此属性控制上，右，底部，左，两侧向内的距离。</td> 
   <td>同上</td> 
  </tr> 
  <tr> 
   <td>border-image-outset</td> 
   <td>用于指定在边框外部绘制 border-image-area的量</td> 
   <td>向外拓充的距离</td> 
   <td>同上</td> 
  </tr> 
  <tr> 
   <td>border-image-repeat</td> 
   <td>用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。</td> 
   <td>如何处理图片填补剩余的位置</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**border-image-width的可能值介绍：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 26]  
**border-image-outset的可能值介绍：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 27]  
**border-image-repeat的可能值介绍：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 28]

**示例：**  
border-image-source很简单就是你放入你的url即可，我就不写示例了。  
border-image-slice 介绍链接：[https://wudi98.blog.csdn.net/article/details/104940881][https_wudi98.blog.csdn.net_article_details_104940881]  
border-image-outset的示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 29]

## 十、多媒体查询 ##

媒体查询可以检测很多内容，其中包括：viewport（视窗）的宽度与高度、设备的宽度与高度、朝向（智能手机横屏，竖屏）、分辨率。

使用语法：

@media not|only mediatype | all and (expressions) { 
    	指定样式。。。
    }

> 说明：  
> 当设备条件与括号里的表达式都成立的时候，那么应用对应的样式。  
> 我们也可以在不同的条件时使用不同的样式文件：
> 
>     <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

媒体类型：

<table> 
 <thead> 
  <tr> 
   <th>媒体类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td>用于所有的媒体设备</td> 
  </tr> 
  <tr> 
   <td>aural</td> 
   <td>用于语音和音频合成器</td> 
  </tr> 
  <tr> 
   <td>braille</td> 
   <td>用于盲人用点字法触觉回馈设备</td> 
  </tr> 
  <tr> 
   <td>embossed</td> 
   <td>用于分页的盲人用点字法打印机</td> 
  </tr> 
  <tr> 
   <td>handheld</td> 
   <td>用于小的手持设备</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>用于打印机</td> 
  </tr> 
  <tr> 
   <td>projection</td> 
   <td>用于方案展示，比如科幻片</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>用于电脑显示器</td> 
  </tr> 
  <tr> 
   <td>tty</td> 
   <td>用于使用固定密度字母栅格的媒体，比如电传打字机和终端。</td> 
  </tr> 
  <tr> 
   <td>tv</td> 
   <td>用于电视机类型的设备</td> 
  </tr> 
 </tbody> 
</table>

css3新增媒体类型

<table> 
 <thead> 
  <tr> 
   <th>媒体类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>screen</td> 
   <td>用于电脑屏幕，平板，智能手机等</td> 
  </tr> 
  <tr> 
   <td>speech</td> 
   <td>用于屏幕阅读器</td> 
  </tr> 
 </tbody> 
</table>

小示例：

> 你可以完全copy下方代码拿去看效果哦，当你的屏幕大于480px的时候body的颜色就会从orange转变到lightgreen色。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>csdn吴小迪</title> 
    <style> body { background-color: orange; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } } </style>
    </head>
    <body>
    	<h1>重置浏览器窗口查看效果！</h1>
    	<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
    </body>
    </html>

## 十一、多列布局 ##

多列布局可以将文本内容设计成像报纸一样，如下图所示:

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 30]

**属性介绍：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>column-count</td> 
   <td>指定需要分割的列数</td> 
  </tr> 
  <tr> 
   <td>column-gap</td> 
   <td>指定列与列直接的间隙</td> 
  </tr> 
  <tr> 
   <td>column-rule-style</td> 
   <td>指定列与列之间的边框样式</td> 
  </tr> 
  <tr> 
   <td>column-rule-width</td> 
   <td>指定了俩列的边框厚度</td> 
  </tr> 
  <tr> 
   <td>column-rule-color</td> 
   <td>指定了俩列的边框颜色</td> 
  </tr> 
  <tr> 
   <td>column-rule</td> 
   <td>是上方三个属性的简写</td> 
  </tr> 
  <tr> 
   <td>column-span</td> 
   <td>一般用于文章头，指定元素跨多少列</td> 
  </tr> 
  <tr> 
   <td>column-width</td> 
   <td>指定列的宽度</td> 
  </tr> 
 </tbody> 
</table>

**兼容写法：**  
为了确保兼容不支持的浏览器，写每一个属性的时候要写三遍。一遍是正常的，一遍前面加-moz-,一遍前面加-webkit-。

> 关于所有的兼容写法私有属性前缀请看文章末尾。

**属性值简要说明：**  
由于这个很简单，笔者就不放示例在这里了，只在这里向大家口述，朋友们可以自行去写代码看效果验证笔者说的正确性：

> column-count  
> 你想要给文章分成几列，传对应的数字即可

> column-gap  
> 设置文章当中每一列的间隔，我们可以理解为给没俩列的文章中间设置的margin距离

> column-rule-style  
> 设置文章边框的样式，比如实线，虚线等等，具体参考border-style的属性值

> column-rule-width  
> 设置文章边框的宽度，相当于就是设置border-width

> column-rule-color  
> 设置文章边框的颜色，相当于是设置border-color

> column-rule  
> 上方三个属性的简写，相当于是设置border。只不过这个border并不是四面的。

上面四个属性的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 31]

> column-span  
> 指定想要跨越多少列  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 32]

> column-width  
> 指定列的宽度。

## 十二、Animation ##

#### animation属性： ####

**语法：**

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

**参数介绍：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>介绍</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animation-name</td> 
   <td>指定要绑定到选择器的关键帧的名字</td> 
   <td>为 @keyframes 动画指定一个名称</td> 
  </tr> 
  <tr> 
   <td>animation-duration</td> 
   <td>指定动画多少时间完成</td> 
   <td>定义动画完成一个周期需要多少秒或毫秒</td> 
  </tr> 
  <tr> 
   <td>animation-timing-function</td> 
   <td>设置动画将如何完成一个周期</td> 
   <td>默认值：ease，其余可能值见此表格下面：图示例animation-timing-function参数可能值</td> 
  </tr> 
  <tr> 
   <td>animation-delay</td> 
   <td>设置动画在启动器的延迟间隔</td> 
   <td>只有动画开始的第一次会暂停，之后的循环不会暂停，想要每一次循环都暂停的话请借鉴笔者的这种思路：<a href="https://blog.csdn.net/weixin_43606158/article/details/104965442" rel="nofollow">让animation在循环的每一次开始前都停顿一定的时间这样做就OK了</a></td> 
  </tr> 
  <tr> 
   <td>animation-iteration-count</td> 
   <td>定义动画的播放次数</td> 
   <td>默认值是1，参数值：number或者infinite【无限次】</td> 
  </tr> 
  <tr> 
   <td>animation-direction</td> 
   <td>指定是否应该反向播放动画</td> 
   <td>默认值：normal，其余可能值见此表格下面：图示例animation-direction参数可能值</td> 
  </tr> 
  <tr> 
   <td>animation-fill-mode</td> 
   <td>规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式</td> 
   <td>动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。默认值none，其余参数可能值见此表格下面：图示例animation-fill-mode参数可能值</td> 
  </tr> 
  <tr> 
   <td>animation-play-state</td> 
   <td>指定动画是否正在运行或已停止</td> 
   <td>默认值running，可能值：paused【指定暂停动画】，running【正在运行的动画】</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>设置属性为其默认值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承属性</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**参数可能值：**

> 图示例animation-timing-function参数可能值：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 33]

> 图示例animation-direction参数可能值  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 34]

> 图示例animation-fill-mode参数可能值:  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 35]

#### @keyframes规则： ####

> 使用说明：  
> 使用@keyframes规则，你可以创建动画。  
> 创建动画是通过逐步改变从一个CSS样式设定到另一个。  
> 在动画过程中，您可以更改CSS样式的设定多次。  
> 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。  
> 0％是开头动画，100％是当动画完成。  
> 为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

> 注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。

> 语法：
> 
>     @keyframes animationname { keyframes-selector { css-styles;}}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 36]  
小示例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSDN吴小迪</title>
    <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% { top:0px; left:0px; background:red;} 25% { top:0px; left:100px; background:blue;} 50% { top:100px; left:100px; background:yellow;} 75% { top:100px; left:0px; background:green;} 100% { top:0px; left:0px; background:red;} } /* Safari and Chrome */ @-webkit-keyframes mymove { 0% { top:0px; left:0px; background:red;} 25% { top:0px; left:100px; background:blue;} 50% { top:100px; left:100px; background:yellow;} 75% { top:100px; left:0px; background:green;} 100% { top:0px; left:0px; background:red;} } </style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

类似输入的动画：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } #wrap { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; animation: move 5ms ease; -webkit-animation: move 5s ease infinite; } @keyframes move { 0% { width: 1em;} 8.33% { width: 2em;} 16.66% { width: 3em;} 25% { width: 4em;} 33.33% { width: 5em;} 41.66% { width: 6em;} 50% { width: 7em;} 58.33% { width: 8em;} 66.66% { width: 9em;} 75% { width: 10em;} 83.33% { width: 11em;} 91.66% { width: 12em;} 100% { width: 13em;} } @-webkit-keyframes move { 0% { width: 1em;} 8.33% { width: 2em;} 16.66% { width: 3em;} 25% { width: 4em;} 33.33% { width: 5em;} 41.66% { width: 6em;} 50% { width: 7em;} 58.33% { width: 8em;} 66.66% { width: 9em;} 75% { width: 10em;} 83.33% { width: 11em;} 91.66% { width: 12em;} 100% { width: 13em;} } </style>
    </head>
    <body>
    <div id="wrap">
        我就是我，我就是吴小迪啊啊啊啊！
    </div>
    </body>
    </html>

## 十三、Transition ##

**作用：**  
我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。我们只要使用transition即可。

> 如果想要实现过渡的效果，那么我们需要添加效果的css属性以及执行效果需要过渡的时间。

**语法：**

transition: property duration timing-function delay;

**默认值：**

transition: all 0 ease 0;

**参数值介绍：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transition-property</td> 
   <td>指定CSS属性的name【要过渡的属性】</td> 
  </tr> 
  <tr> 
   <td>transition-duration</td> 
   <td>transition效果需要指定多少秒或毫秒完成</td> 
  </tr> 
  <tr> 
   <td>transition-timing-function</td> 
   <td>指定transition效果的转速曲线</td> 
  </tr> 
  <tr> 
   <td>transition-delay</td> 
   <td>定义transition效果开始的时候的停顿时间</td> 
  </tr> 
 </tbody> 
</table>

**示例：**  
比如我们想要在移入一个div的时候将它的背景色变为黄色，过渡时间为俩秒，那么我们就可以这么写：

div { 
    	width:100px;
    	height:100px;
    	background:red;
    	transition:width 2s;
    	-webkit-transition:background 2s; /* Safari */
    }
    div:hover { 
    	background:yellow;
    }

这样朋友们就会发现这个移入到这个div上面的时候背景色是由红色慢慢变成黄色的。

> 如果想要实现多项属性都有过渡时间的话请用>逗号隔开，语法如下：
> 
>     div { 
>       transition: width 2s, height 2s, transform 2s;
>        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
>     }

> 如果想要实现全部属性都有过渡时间的话，语法如下：
> 
>     div { 
>       transition: all 2s;
>        -webkit-transition: all 2s;
>     }

## 十四、Word-wrap ##

**作用：**  
定义长的内容是自动换行还是不换行。

**语法：**

word-wrap: normal|break-word;

**属性值介绍：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>只在允许的断字点换行（浏览器保持默认处理）</td> 
  </tr> 
  <tr> 
   <td>break-word</td> 
   <td>在长单词或URL地址内部进行换行</td> 
  </tr> 
 </tbody> 
</table>

## 十五、Text-overflow ##

**作用：**  
定义溢出的文本如何向用户展示。

**语法：**

text-overflow: clip|ellipsis|string;

**属性值介绍：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clip</td> 
   <td>修剪文字【直接裁掉了】</td> 
  </tr> 
  <tr> 
   <td>ellipsis</td> 
   <td>显示省略号来代替被修剪的文本</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>使用给定的字符串来代表被修剪的文本</td> 
  </tr> 
 </tbody> 
</table>

> 谷歌浏览器还支持指定行数超出文本指定样式的操作，具体请看：[https://blog.csdn.net/weixin\_43606158/article/details/90236856?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522158503769119724811863556%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request\_id=158503769119724811863556&biz\_id=0&utm\_source=distribute.pc\_search\_result.none-task][https_blog.csdn.net_weixin_43606158_article_details_90236856_ops_request_misc_257B_2522request_255Fid_2522_253A_2522158503769119724811863556_2522_252C_2522scm_2522_253A_252220140713.130056874_2522_257D_request_id_158503769119724811863556_biz_id_0_utm_source_distribute.pc_search_result.none-task]

## 十六、Word-break ##

**作用：**  
指定非CJK脚本的断行规则

> CJK脚本是中国，日本和韩国（“中日韩”）脚本。

**语法：**

word-break: normal|break-all|keep-all;

**属性值介绍：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>使用浏览器默认的换行规则</td> 
  </tr> 
  <tr> 
   <td>break-all</td> 
   <td>允许在单词内换行</td> 
  </tr> 
  <tr> 
   <td>keep-all</td> 
   <td>只能在半角空格或连字符处换行</td> 
  </tr> 
 </tbody> 
</table>

## 十七、Flex弹性盒 ##

**介绍：**  
弹性盒子是 CSS3 的一种新的布局模式。  
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。  
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

> 主要思想是让容器有能力让其子项目能够自适应改变宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）flex容器会使子项目扩展来填充可用空间，或缩小它们以防止溢出容器。

> 注意：  
> 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

**弹性盒布局功能主要具有以下几点：**

1.  屏幕和浏览器窗口大小发生变化时也可以灵活调整布局。
2.  指定伸缩项目沿着主轴或侧轴按比例分配空余空间从而调整伸缩项目的大小。
3.  指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间分配到项目之前、之后或之间。
4.  指定如何将垂直于元素布局轴的额外空间分布到该元素周围。
5.  控制元素在页面上的布局方向。
6.  按照不同标准流所指定的排序方式对屏幕上的元素重新排序。

**弹性盒模型中的专业术语：**  
a. 主轴和侧轴  
b. 主/侧轴方向  
c. 主/侧轴起点，主/侧轴终点  
d. 主侧轴长度  
e. 伸缩容器（外层）和伸缩项目（子元素或内容）

**弹性盒的使用：**  
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。  
弹性容器内包含了一个或多个弹性子元素。

> 注意点：设置Flex布局以后，子元素的float、clear和vertical-align属性将失效。

**容器的属性【外层盒子可以设置的属性】**  
一共有六个：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
   <th>可能值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-direction</td> 
   <td>决定主轴的方向</td> 
   <td>row（默认值）【主轴为水平方向，起点在左端】<br>row-reverse【主轴为水平方向，起点在右端】<br>column【主轴为垂直方向，起点在上沿】<br>column-reverse 【主轴为垂直方向，起点在下沿】</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>如何换行</td> 
   <td>nowrap(默认值)【不换行】<br>wrap【换行，第一行在上方】<br>wrap-reverse【换行，第一行在下方】</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>flex-direction属性和flex-wrap属性的简写形式</td> 
   <td>默认值为row nowrap</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>子项在主轴上的对齐方式</td> 
   <td>flex-start（默认值）【左对齐】<br> flex-end【右对齐】 <br>center【居中】 <br>space-between【俩端对齐，项目之间的间隔都相等】 <br> space-around【每个项目俩侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。】</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>子项在侧轴上的对齐方式</td> 
   <td>flex-start【交叉轴的起点对齐】<br>flex-end【交叉轴的终点对齐】<br>center【交叉轴的中点对齐】<br>baseline【项目的第一行文字的基线对齐】<br>stretch（默认值）【如果项目为设置高度或设为auto，将占满整个容器的高度】</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>定义多根轴线的对齐方式，如果只有一根轴线，则该属性不起作用</td> 
   <td>flex-start【与交叉轴的起点对齐】<br>flex-end【与交叉轴的终点对齐】 <br> center【与交叉轴的中点对齐】<br> space-between【与交叉轴的俩端对齐，轴线之间的间隔平均分布】<br> space-around【每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。】<br>stretch（默认值）【轴线占满整个交叉轴】</td> 
  </tr> 
 </tbody> 
</table>

**子项的属性【内层直接子元素可以设置的属性】**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
   <th>可能值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>order</td> 
   <td>定义项目的排列顺序，数值越小，排列越靠前</td> 
   <td>默认为0</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>定义放大比例</td> 
   <td>默认为0，即如果存在剩余空间，也不放大</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>定义缩小比例</td> 
   <td>默认为1，即如果空间不足，该项目将缩小</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。</td> 
   <td>默认值为auto，即项目的本来大小。</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>flex-grow, flex-shrink 和 flex-basis的简写</td> 
   <td>默认值为0 1 auto。后两个属性可选。</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</td> 
   <td>auto（默认值）【继承父元素的align-items属性】<br> flex-start【交叉轴的七点对齐】<br>flex-end【交叉轴的终点对齐】 <br> center【交叉轴的中点对齐】<br>baseline【项目的第一行文字的基线对齐】 <br>stretch【如果项目未设置高度或设为auto，将占满整个容器的高度】</td> 
  </tr> 
 </tbody> 
</table>

> 属性值效果参考链接：[https://www.runoob.com/w3cnote/flex-grammar.html][https_www.runoob.com_w3cnote_flex-grammar.html]

## 十八、@font-face ##

CSS3允许用户自定义字体类型，通过@font-face能够加载服务器端的字体文件，让客户端浏览器显示客户端所没有安装的字体。@font-face规则在CSS3规范中属于字体模块。

@font-face属性及其取值说明如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-family</td> 
   <td>设置文本的字体名称</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>设置文本的样式</td> 
  </tr> 
  <tr> 
   <td>font-variant</td> 
   <td>设置文本是否大小写</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>设置文本的粗细</td> 
  </tr> 
  <tr> 
   <td>font-stretch</td> 
   <td>设置文本是否横向的拉伸变形</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>设置文本的大小</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>设置自定义字体的相对路径或者绝对路径。注意：该属性只能在@font-face规则里使用</td> 
  </tr> 
 </tbody> 
</table>

> 兼容情况介绍：  
> IE5开始就支持了该属性，但是只支持微软自由的.eot(Embedded Open Type)字体格式，而其他浏览器的具体支持情况见下图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 37]  
> 考虑部分兼容问题，在使用时建议同时定义.eot和.ttf【TrueType】，以便能够兼容所有浏览器。

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 38]  
代码：

<!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>csdn吴小迪</title>
        <style type="text/css"> @font-face { font-family: 'lexograph'; /* 兼容ie */ /* 下载地址： http://randsco.com//fonts/lexograph.eot */ src: url("./lexograph.eot"); /* 兼容非ie */ /* 下载地址：http://randsco.com/fonts/lexograph.ttf */ src: local('Lexographer'), url('./lexograph.ttf') format("truetype"); } h1 { /* 设置引入字体文件中的lexograph字体类型 */ font-family: lexograph, verdana, sans-serif; font-size: 4em; } body { background: antiquewhite; } </style>
    </head>
    <body>
        <h1>Hello world! <br />My name is wu xiao di!</h1>
    </body>
    </html>

## 关于查看使用的CSS3属性的兼容情况： ##

前端的html，css，js都可以通过caniuse进行查看兼容情况。  
[查看前端代码在各浏览器的支持情况的方法][Link 1]

[caniuse官网][caniuse]

## 兼容写法介绍： ##

<table> 
 <thead> 
  <tr> 
   <th>兼容前缀</th> 
   <th>针对浏览器</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-webkit-</td> 
   <td>Safari、Chrome</td> 
  </tr> 
  <tr> 
   <td>-moz-</td> 
   <td>Firefox</td> 
  </tr> 
  <tr> 
   <td>-khtml-</td> 
   <td>Konqueror类型的浏览器</td> 
  </tr> 
  <tr> 
   <td>-o-</td> 
   <td>Opera类型浏览器</td> 
  </tr> 
  <tr> 
   <td>-ms-</td> 
   <td>IE8+浏览器</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: /images/20230529/5688e976c9c94bcd911573919e04ce1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: /images/20230529/05f01ec1294b44539de17bd007e000bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]: /images/20230529/314f329f34e54ed3834b83dd0fe0c57f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]: /images/20230529/fd10a872dc8a4346b74fe292650e2704.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]: /images/20230529/99fae6a48b88491c920bc2f35a34fac9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]: /images/20230529/be703c0810d04f559d7ecedeb783f23b.png
[https_www.runoob.com_try_try.php_filename_trycss3_box-shadow4]: https://www.runoob.com/try/try.php?filename=trycss3_box-shadow4
[https_www.runoob.com_try_try.php_filename_trycss3_box-shadow5]: https://www.runoob.com/try/try.php?filename=trycss3_box-shadow5
[20200320214859497.png]: /images/20230529/fbbe1facaaf7451e97cd9b8a8bba08e5.png
[text-shadow]: https://wudi98.blog.csdn.net/article/details/105000185
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 6]: /images/20230529/ed717f42cde540c5916149e38f86f635.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 7]: /images/20230529/8c4b34c674f54273b581a2ee061e6cd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 8]: /images/20230529/928a95704d4d40ab8e142f29be1558af.png
[https_www.runoob.com_cssref_func-radial-gradient.html]: https://www.runoob.com/cssref/func-radial-gradient.html
[https_c.runoob.com_codedemo_3391]: https://c.runoob.com/codedemo/3391
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 9]: /images/20230529/790ca976b04d465bb88281c6252bfbc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 10]: /images/20230529/344853c8e52e4a018bb312c0d55763ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 11]: /images/20230529/63838662230f4801b2c635e5c7fa3920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 12]: /images/20230529/586ae09459064657bd0970c10c3db57e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 13]: /images/20230529/ec20380e97fb43c18cfca580ab0f799d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 14]: /images/20230529/948adc7be5d74285a18652edf71057ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 15]: /images/20230529/0cdf273d3f7246c487f1d3d02c28602f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 16]: /images/20230529/84d198ece378413aa60197ad9fd0996d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 17]: /images/20230529/624efdb187f94cb89a2ffee56edd6780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 18]: /images/20230529/5ce103aba83f4710827aed05327c9621.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 19]: /images/20230529/5cf12718f83b4da39d4133aeba5431d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 20]: /images/20230529/924d0e0c708347cb9244f7c50ce7f31e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 21]: /images/20230529/958286296ab34f40a6369f206e61dcbb.png
[20200316080352382.png]: /images/20230529/40fa559ef1e24e339ddc65e0e7001803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 22]: /images/20230529/224456dae26d4ae48a80696812f5e13d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 23]: /images/20230529/063b24e40f814bf793b7d0334d989dd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 24]: /images/20230529/9c7d5cc39cc74a9ba3d18acb5fd190c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 25]: /images/20230529/72e7cf79e4754bbdaf5d0ea02fd009a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 26]: /images/20230529/1320b9b9bced4063a30474da92e8e2bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 27]: /images/20230529/d0d38e29fe3d4fa1958a1442caff92a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 28]: /images/20230529/4668afec39ae4772a903bea7188c34e4.png
[https_wudi98.blog.csdn.net_article_details_104940881]: https://wudi98.blog.csdn.net/article/details/104940881
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 29]: /images/20230529/2a9bd645ca044f989b95264aba09b2a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 30]: /images/20230529/a80cdf3b973344c49a2c497709ed164b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 31]: /images/20230529/b7b9095dbfd942fb965ffad08cdd3fe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 32]: /images/20230529/3c85c948983742efbcae30da57eac97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 33]: /images/20230529/0d51581564b541379281a5b5fef071ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 34]: /images/20230529/4745a6c266304e68a5af68c184024a49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 35]: /images/20230529/c7856afe48d6403d98c699e5e3b7b43b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 36]: /images/20230529/bad4e729f5b9467d96f9015a47fa5519.png
[https_blog.csdn.net_weixin_43606158_article_details_90236856_ops_request_misc_257B_2522request_255Fid_2522_253A_2522158503769119724811863556_2522_252C_2522scm_2522_253A_252220140713.130056874_2522_257D_request_id_158503769119724811863556_biz_id_0_utm_source_distribute.pc_search_result.none-task]: https://blog.csdn.net/weixin_43606158/article/details/90236856?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158503769119724811863556%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158503769119724811863556&biz_id=0&utm_source=distribute.pc_search_result.none-task
[https_www.runoob.com_w3cnote_flex-grammar.html]: https://www.runoob.com/w3cnote/flex-grammar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 37]: /images/20230529/7ff160eb087f4e83aa0d0400a3e3f575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 38]: /images/20230529/6d01c497214646d79ad940413e921706.png
[Link 1]: https://blog.csdn.net/weixin_43606158/article/details/89288068?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158424782719726867812298%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158424782719726867812298&biz_id=0&utm_source=distribute.pc_search_result.none-task
[caniuse]: https://www.caniuse.com/