尚硅谷-前端技术-CSS3

一、CSS3 简介

1.CSS3概述

css3室css2的升级版本，他在css2的基础上新增了很多强大的i想你功能，从额解决一些实际面临的问题。
css3在未来的会按照某块的方式发展：
css3的新特性如下：
- 新增了更加实用的选择器，例如：动态味蕾选择器、目标伪类选择器、伪元素选择器等等。
- 新增了更好的视觉效果，例如：圆角、阴影、渐变等。
- 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性
- 新增了全新的布局方案 —— 弹性盒子。
- 新增了 Web 字体，可以显示用户电脑上没有安装的字体。
- 增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
- 增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
- 增加动画与过渡效果，让效果的变换更具流线性、平滑性。

2.CSS3私有前缀

2.1 什么是私有前缀

如下代码中的 -webkit- 就是私有前缀

div {

width:49px;

height:19px;

-webkit-border-radius: 29px;

}

2.2为什么要有私有前缀

W3C标准所提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后就不需要私有前缀了。
查询CSS3兼容性的网站：http://caiuse.com/

2.3常见浏览器私有前缀

Chrome：-webkit-
Safari：-webkit-
FireFox：-webkit-
Edge：-webkit-

二、CSS3基本语法

1.CSS3 新增长度单位

rem 根元素字体大小的倍数，只与根元素字体大小有关。
vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
vmax 视口宽高中大的那个的百分之多少。（了解即可）
vmin 视口宽高中小的那个的百分之多少。（了解即可）

2. CSS3 新增颜色设置方式

CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla

3. CSS3 新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；这
些在 CSS2 中已经详细讲解，此处略过。

4. CSS3 新增盒模型相关属性

4.1. `box-sizing` 怪异盒模型

使用 box-sizing 属性可以设置盒模型的两种类型

content-box：width 和 height 设置的是盒子内容区的大小。（默认值）
border-box：width 和 height 设置的是盒子总大小。（怪异盒模型）

4.2. resize 调整盒子大小

使用 resize 属性可以控制是否允许用户调节元素尺寸

none：不允许用户调整元素大小。 (默认)
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度。
vertical：用户可以调节元素的高度。

4.3. `box-shadow` 盒子阴影

使用 box-shadow 属性为盒子添加阴影。

语法：box-shadow: h-shadow v-shadow blur spread color inset;
各个值的含义：

属性名	功能
contenteditable	表示元素是否可被用户编辑，可选值如下： true：可编辑 false：不可编辑
draggable	表示元素可以被拖动，可选值如下： true：可拖动 false：不可拖动
hidden	隐藏元素
spellcheck	规定是否对元素进行拼写和语法检查，可选值如下： true：检 false：不检查
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-*	用于存储页面的私有定制数据。

默认值： box-shadow:none 表示没有阴影

4.4. opacity 不透明度

opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。
opacity 与 rgba 的区别

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

5. CSS3 新增背景属性

5.1. background-origin

作用：设置背景图的原点。
语法：
- padding-box ：从 padding 区域开始显示背景图像。—— 默认值
- border-box ：从 border 区域开始显示背景图像。
- content-box ：从 content 区域开始显示背景图像。

5.2. background-clip

作用：设置背景图的向外裁剪的区域。
语法：
- border-box ：从 border 区域开始向外裁剪背景。 —— 默认值
- padding-box ：从 padding 区域开始向外裁剪背景。
- content-box ：从 content 区域开始向外裁剪背景。
- text ：背景图只呈现在文字上。

5.3. background-size

作用：设置背景图的尺寸。
语法：
- 用长度值指定背景图片大小，不允许负值。
  - background-size: 300px 200px;
- 用百分比指定背景图片大小，不允许负值。
  - background-size: 100% 100%;
- auto ：背景图片的真实大小。 —— 默认值
- contain ：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整
  背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
  - background-size: contain;
- cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择
  - background-size: cover;

5.4. backgorund 复合属性

语法：background: color url repeat position / size origin clip

注意：

origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如
果设置了两个值，前面的是 origin ，后面的 clip 。
size 的值必须写在 position 值的后面，并且用 / 分开。

5.5. 多背景图

CSS3 允许元素设置多个背景图片

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
url(../images/bg-rt.png) no-repeat right top,
url(../images/bg-lb.png) no-repeat left bottom,
url(../images/bg-rb.png) no-repeat right bottom;

6. CSS3新增边框属性

在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。
同时设置四个角的圆角：border-radius:10px;

属性名	作用
border-top-left-radius	设置左上角圆角半径： 1.一个值是正圆半径， 2.两个值分别是椭园的×半径、y半径。
border-top-right-radius	设置右上角圆角半径： 1.一个值是正圆半径， 2.两个值分别是椭圆的×半径、y半径。
border-bottom-right-radius	设置右下角圆角半径： 1.一个值是正圆半径， 2.两个值分别是椭圆的×半径、y半径。
border-bottom-left-radius	设置左下角圆角半径： 1.一个值是正圆半径， 2. 两个值分别是椭圆的 x半径、y半径

分开设置每个角的圆角，综合写法（几乎不用）：

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

6.2 边框外轮廓（了解）

outline-width ：外轮廓的宽度。
outline-color ：外轮廓的颜色。
outline-style ：外轮廓的风格。
none ：无轮廓
dotted ：点状轮廓
dashed ：虚线轮廓
solid ：实线轮廓
double ：双线轮廓
outline-offset 设置外轮廓与边框的距离，正负值都可以设置
- 注意： outline-offset 不是 outline 的子属性，是一个独立的属性。
outline 复合属性
- outline:50px solid blue;

7.CSS3新增文本属性

7.1 文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。

语法：text-shadow: h-shadow v-shadow blur color;
默认值： text-shadow:none 表示没有阴影。

值	描述
`h-shadow`	必需写，水平阴影的位置。允许负值。
`v-shadow`	必需写，垂直阴影的位置。允许负值。
`blur`	可选，模糊的距离。
`color`	可选，阴影的颜色

7.2 文本换行

在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。

值	含义
`normal`	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
`pre`	原样输出，与 pre 标签的效果相同。
`pre-wrap`	在 pre 效果的基础上，超出元素边界自动换行。
`pre-line`	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
`nowrap`	强制不换行

7.3 文本溢出

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：

值	含义
`clip`	当内联内容溢出时，将溢出部分裁切掉。（默认值）
`ellipsis`	当内联内容溢出块容器时，将溢出部分替换为 … 。

注意：

要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible
值， white-space 为 nowrap 值。

7.4 文本修饰

CSS3 升级了 text-decoration 属性，让其变成了复合属性。

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

子属性及其含义：

text-decoration-line 设置文本装饰线的位置
none ：指定文字无装饰（默认值）
underline ：指定文字的装饰是下划线
overline ：指定文字的装饰是上划线
line-through ：指定文字的装饰是贯穿线
text-decoration-style 文本装饰线条的形状
solid ：实线（默认）
double ：双线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线
text-decoration-color 文本装饰线条的颜色

7.5 文本描边

注意：文字描边功能仅 webkit 内核浏览器支持。

-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

8. CSS3 新增渐变

8.1 线性渐变

8.2 径向渐变

8.3 重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。

使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。