CSS3 新增背景属性
盒模型相关新增内容参见：CSS中的盒子模型 | QT-7274
background-origin
- 作用：设置背景图的原点。
- 语法
padding-box：从padding区域开始显示背景图像。—— 默认值border-box： 从border区域开始显示背景图像。content-box： 从content区域开始显示背景图像。
background-clip
-
作用：设置背景图的向外裁剪的区域。
-
语法：
border-box： 从border区域开始向外裁剪背景。 —— 默认值padding-box： 从padding区域开始向外裁剪背景。content-box： 从content区域开始向外裁剪背景。text：背景图只呈现在文字上。
注意：若值为text，那么background-clip要加上-webkit-前缀。
background-size
-
作用：设置背景图的尺寸。
-
语法：
-
用长度值指定背景图片大小，不允许负值。
background-size: 300px 200px; -
用百分比指定背景图片大小，不允许负值。
background-size: 100% 100%; -
auto： 背景图片的真实大小。 —— 默认值 -
contain： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。background-size: contain; -
cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;
-
background复合属性
-
语法：
background: color url repeat position / size origin clip注意：
origin和clip的值如果一样，如果只写一个值，则origin和clip都设置；如果设置了两个值，前面的是origin，后面的clip。size的值必须写在position值的后面，并且用/分开。
CSS3新增边框属性
-
在 CSS3 中，使用
border-radius属性可以将盒子变为圆角。 -
同时设置四个角的圆角
border-radius:10px;具体属性请在MDN上自查。
CSS3新增文本属性
文本阴影
在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
文本换行
在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
常用值如下：
| 值 | 含义 |
|---|---|
normal |
文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） |
pre |
原样输出，与pre标签的效果相同。 |
pre-wrap |
在pre效果的基础上，超出元素边界自动换行。 |
pre-line |
在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。 |
nowrap |
强制不换行 |
文本溢出
在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：
| 值 | 含义 |
|---|---|
clip |
当内联内容溢出时，将溢出部分裁切掉。（默认值） |
ellipsis |
当内联内容溢出块容器时，将溢出部分替换为...。 |
注意：要使得
text-overflow属性生效，块容器必须显式定义overflow为非visible值，white-space为nowrap值。
文本修饰
CSS3升级了text-decoration属性，让其变成了复合属性。
text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor子属性及其含义：
text-decoration-line设置文本装饰线的位置none： 指定文字无装饰 （默认值）underline： 指定文字的装饰是下划线overline： 指定文字的装饰是上划线line-through： 指定文字的装饰是贯穿线
text-decoration-style文本装饰线条的形状solid： 实线 （默认）double： 双线dotted： 点状线条dashed： 虚线wavy： 波浪线
text-decoration-color文本装饰线条的颜色
文本描边
注意：文字描边功能仅 webkit 内核浏览器支持。
webkit-text-stroke-width：设置文字描边的宽度，写长度值。webkit-text-stroke-color：设置文字描边的颜色，写颜色值。webkit-text-stroke：复合属性，设置文字描边宽度和颜色。
CSS3新增渐变
线性渐变
径向渐变
重复渐变
web字体
基本用法
-
语法（简写方式）
@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- */ }
定制字体
- 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
- 可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
2D变换
2D位移
2D 位移可以改变元素的位置，具体使用方式如下：
- 先给元素添加 转换属性
transform - 编写
transform的具体值，相关可选值如下：
| 值 | 含义 |
|---|---|
translateX |
设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度 的百分比。 |
translateY |
设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度 的百分比。 |
translate |
一个值代表水平方向，两个值代表：水平和垂直方向。 |
注意：
-
位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
-
与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
-
浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
-
transform 可以链式编写，例如：
transform: translateX(30px) translateY(40px); -
位移对行内元素无效。
-
位移配合定位，可实现元素水平垂直居中：
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}2D缩放
2D 缩放是指：让元素放大或缩小，具体使用方式如下：
-
先给元素添加 转换属性
transform -
编写
transform的具体值，相关可选值如下：值 含义 scaleX设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 scaleY设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小 于 1 缩小。 scale同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。 -
注意点：
scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解。- 借助缩放，可实现小于 12px 的文字。
2D旋转
2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：
- 先给元素添加 转换属性
transform - 编写
transform的具体值，相关可选值如下：
| 值 | 含义 |
|---|---|
rotate |
设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。 |
注意：
rotateZ(20deg)相当于rotate(20deg)，当然到了 3D 变换的时候，还能写：rotate(x,x,x)
多重变换
多个变换，可以同时使用一个 transform 来编写。
transform: translate(-50%, -50%) rotate(45deg);注意点：多重变换时，建议最后旋转。
变换原点
-
元素变换时，默认的原点是元素的中心，使用
transform-origin可以设置变换的原点。 -
修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
-
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
-
如果只提供一个，若是像素值，表示横坐标，纵坐标取
50%；若是关键词，则另一个坐标取50%transform-origin: 50% 50%， 变换原点在元素的中心位置，百分比是相对于自身。—— 默认值transform-origin: left top，变换原点在元素的左上角 。transform-origin: 50px 50px， 变换原点距离元素左上角50px50px的位置。transform-origin: 0，只写一个值的时候，第二个值默认为50%。
3D变换
过渡
transition-property
-
作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。
-
常用值：
none：不过渡任何属性。all：过渡所有能过渡的属性。- 具体某个属性名 ，例如：
width、heigth，若有多个以逗号分隔。
注意：
不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。
常见的支持过渡的属性有：颜色、长度值、百分比、z-index、opacity、 2D 变换属性、 3D 变换属性、阴影。
transition-duration
- 作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
- 常用值：
0：没有任何过渡时间 —— 默认值。s或ms：秒或毫秒。- 列表 ：
- 如果想让所有属性都持续一个时间，那就写一个值。
- 如果想让每个属性持续不同的时间那就写一个时间的列表。
transition-delay
- 作用：指定开始过渡的延迟时间，单位： s 或 ms
transition-timing-function
- 作用：设置过渡的类型
- 常用值：
ease： 平滑过渡 —— 默认值linear： 线性过渡ease-in： 慢 → 快ease-out： 快 → 慢ease-in-out： 慢 → 快 → 慢step-start： 等同于steps(1, start)step-end： 等同于steps(1, end)steps( integer, ?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。cubic-bezie( number, number, number, number)： 特定的贝塞尔曲线类型。
transition 复合属性
如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求。
transition:1s 1s linear all;动画
多列布局
常用属性如下：
column-count：指定列数，值是数字。column-width：指定列宽，值是长度。columns：同时指定列宽和列数，复合属性；值没有数量和顺序要求。column-gap：设置列边距，值是长度。column-rule-style：设置列与列之间边框的风格，值与 border-style 一致。column-rule-width：设置列与列之间边框的宽度，值是长度。column-rule-color：设置列与列之间边框的颜色。coumn-rule：设置列边框，复合属性。column-span: 指定是否跨列；值:none、all。
