文章目录
一、CSS3 概述二、CSS3 新特性2.1. 新增长度单位2.2. CSS3 新增颜色设置方式2.2.1. rgb(css2) 或 rgba (css3)2.2.2. HEX 或 HEXA(css2)2.2.3. HSL 或 HSLA (css3)
2.3. 新增选择器2.4. 新增盒模型相关属性2.4.1. box-sizing 怪异盒模型2.4.2. resize 调整盒子大小2.4.3. box-shadow 盒子阴影2.4.4. opacity 不透明度
2.5. 新增背景属性2.6. 新增边框属性2.6.1. 边框圆角2.6.2. 边框外轮廓（了解）
2.7. 新增文本属性2.7.1. 文本阴影2.7.2. 文本换行2.7.3. 文本溢出2.7.4. 文本修饰2.7.5. 文本描边
2.8. 新增渐变2.8.1. 线性渐变2.8.2. 径向渐变
2.8.3. 重复渐变2.9. 新增web 字体2.9.1. 基本用法2.9.2. 定制字体2.9.3. 字体图标
2.10. 新增transform变换2.11. 新增transition过渡2.12. 新增animation动画2.13. 新增多列布局2.14. 新增伸缩盒模型flex2.15. 响应式布局
一、CSS3 概述
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
二、CSS3 新特性
CSS3 的新特性如下：
新增了更加实用的选择器，例如：动态伪类选择器（:link、:visited、:hover、:active等）、目标伪类选择器（:target）、伪元素选择器（::before、::after ）等等。新增了更好的视觉效果，例如：圆角、阴影、渐变等。新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。新增了全新的布局方案 —— 弹性盒子。新增了 Web 字体，可以显示用户电脑上没有安装的字体。增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。增加动画与过渡效果，让效果的变换更具流线性、平滑性。其他…
2.1. 新增长度单位
rem 根元素字体大小的倍数，只与根元素字体大小有关。vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。vmax 视口宽高中大的那个的百分之多少。（了解即可）vmin 视口宽高中小的那个的百分之多少。（了解即可）
2.2. CSS3 新增颜色设置方式
CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla
2.2.1. rgb(css2) 或 rgba (css3)
编写方式： 使用 红、黄、蓝 这三种光的三原色进行组合。
r 表示 红色 redg 表示 绿色 greenb 表示 蓝色 bluea 表示 透明度 alpha值
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color: rgb(138, 43, 226) /* 紫罗兰色 */
color: rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
小规律：
若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比 。
2.2.2. HEX 或 HEXA(css2)
HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来表达，
格式为： #rrggbb 每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ），所以每一种光的最小值是： 00 ，最大值是： ff
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */
2.2.3. HSL 或 HSLA (css3)
HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)
色相(hue）：取值范围是 0~360 度，0是红色，120 是绿色，240 是蓝色。饱和度 (saturation)： 是一个百分比值，0% 表示灰色阴影，而 100% 是纯色，没有灰色阴影。亮度 (lightness) ：也是百分比，0% 是黑色，50% 是既不明也不暗，100%是白色 具体度数对应的颜色如下图：
2.3. 新增选择器
CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类 CSS选择器详解
2.4. 新增盒模型相关属性
2.4.1. box-sizing 怪异盒模型
使用 box-sizing 属性可以设置盒模型的两种类型
2.4.2. resize 调整盒子大小
resize CSS 属性允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用）
2.4.3. box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。 语法： box-shadow: h-shadow v-shadow blur spread color inset;
默认值： box-shadow:none 表示没有阴影
示例：
/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;
2.4.4. opacity 不透明度
opacity 属性能为整个元素添加透明效果（文字背景都会透明）， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明
opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
2.5. 新增背景属性
CSS3新增背景属性
2.6. 新增边框属性
2.6.1. 边框圆角
在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。
同时设置四个角的圆角：
border-radius:10px;
分开设置每个角的圆角（几乎不用）：
分开设置每个角的圆角，综合写法（几乎不用）：
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
2.6.2. 边框外轮廓（了解）
outline-width ：外轮廓的宽度。outline-color ：外轮廓的颜色。outline-style ：外轮廓的风格。 none ： 无轮廓 dotted ： 点状轮廓 dashed ： 虚线轮廓 solid ： 实线轮廓 double ： 双线轮廓outline-offset 设置外轮廓与边框的距离，正负值都可以设置。 注意： outline-offset 不是 outline 的子属性，是一个独立的属性。outline 复合属性 outline: 50px solid blue;
2.7. 新增文本属性
2.7.1. 文本阴影
在 CSS3 中，我们可以使用text-shadow属性给文本添加阴影。
语法： text-shadow: h-shadow v-shadow blur color;
默认值： text-shadow:none 表示没有阴影。
2.7.2. 文本换行
在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
常用值如下：
2.7.3. 文本溢出
在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：
注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible值， white-space 为 nowrap 值。
CSS超出文本省略号显示
2.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文本装饰线条的颜色
2.7.5. 文本描边
注意：文字描边功能仅 webkit 内核浏览器支持。
-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。
2.8. 新增渐变
2.8.1. 线性渐变
多个颜色之间的渐变， 默认从上到下渐变。
background-image: linear-gradient(red,yellow,green);
使用关键词设置线性渐变的方向。
background-image: linear-gradient(to top,red,yellow,green); background-image: linear-gradient(to right top,red,yellow,green);
使用角度设置线性渐变的方向。
background-image: linear-gradient(30deg,red,yellow,green);
调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
2.8.2. 径向渐变
多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比） background-image: radial-gradient(red,yellow,green);
使用关键词调整渐变圆的圆心位置。
background-image: radial-gradient(at right top,red,yellow,green);
使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green);
调整渐变形状为正圆 。
background-image: radial-gradient(circle,red,yellow,green);
调整形状的半径 。
background-image: radial-gradient(100px,red,yellow,green); background-image: radial-gradient(50px 100px,red,yellow,green);
调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
2.8.3. 重复渐变
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
2.9. 新增web 字体
2.9.1. 基本用法
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
语法（简写方式）
@font-face {
font-family: "情书字体";
src: url("./方正手迹.ttf");
}
语法（高兼容性写法）
@font-face {
font-family: "atguigu";
font-display: swap;
src: url("webfont.eot"); /* IE9 */
src: url("webfont.eot?#iefix") format("embedded-opentype"),
/* IE6-IE8 */ url("webfont.woff2") format("woff2"),
url("webfont.woff") format("woff"),
/* chrome、firefox */ url("webfont.ttf") format("truetype"),
/* chrome、firefox、opera、Safari,
Android*/ url("webfont.svg#webfont")
format("svg"); /* iOS 4.1- */
}
2.9.2. 定制字体
中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。 可使用阿里 Web 字体定制工具
2.9.3. 字体图标
相比图片更加清晰。灵活性高，更方便改变大小、颜色、风格等。兼容性好， IE 也能支持。 阿里图标官网地址
2.10. 新增transform变换
CSS3 transform变换（2D+3D）
2.11. 新增transition过渡
CSS3过渡transition
2.12. 新增animation动画
CSS3动画animation
2.13. 新增多列布局
作用：专门用于实现类似于报纸的布局。
常用属性如下：
column-count ：指定列数，值是数字。column-width ：指定列宽，值是长度。columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。column-gap ：设置列边距，值是长度。column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。column-rule-width ：设置列与列之间边框的宽度，值是长度。column-rule-color ：设置列与列之间边框的颜色。coumn-rule ：设置列边框，复合属性。column-span 指定是否跨列；值: none 、 all 。
2.14. 新增伸缩盒模型flex
CSS3伸缩盒模型flex
2.15. 响应式布局
CSS3响应式布局
乐视怎么截图？超简单方法一看就会！ROS多线接入和多线对外提供服务的完整做法,谁进谁出，电信进电信出，联通进联通出，移动进移动出