CSS3新增功能02

Posted 2020-08-05 5毛钱小辣条

1. CSS3中background新属性

1.1 background-size：直接设置图片的大小。

1.1.1 可以使用数值直接设置宽高。

1.1.2 cover：缩放图片，铺满盒子，图片的宽高比不变，会使图片某一部分伸出盒子范围。

1.1.3 contain：缩放图片，不会铺满盒子，图片的宽高比不变，在图片全部在盒子范围内的前提下，缩放图片直到图片的宽或者高达到盒子对应的值，会使盒子有一部分为空白。

1.2 background-origin：设置图片在盒子中开始显示的位置

1.2.1 border-box：从盒子边框开始显示图片。

1.2.2 padding-box：从盒子内边距开始显示图片。

1.2.3 content-box：从盒子内容区域开始显示图片。

1.3 background-clip：设置图片裁剪的位置

使用原则同background-origin属性。

2. transition过渡属性

2.1 transition-property：需要过渡改变的属性，all为所有CSS样式。

2.2 ransition-duration：过渡需要持续的时间。

2.3 transition-delay：开始过渡前延迟的时间。

2.4 transition-timing-function：设置过渡时显示的效果。

2.4.1 linear：线性过渡，匀速过渡。

2.4.2 ease：平滑过渡，默认值。

2.4.3 cubic-bezier()：通过贝塞尔曲线设置过渡效果。

2.5 过渡属性连写

2.5.1 参数1：需要过渡改变的样式属性。

2.5.2 参数2：过渡持续时间。

2.5.3 参数3：过渡开始前延迟时间。

2.5.4 参数4：过渡效果。

3. transform变换属性

3.1 可以是元素根据transform的设置值来改变位置、形状等，但是只改变指定元素不影响其他元素的属性和页面布局。

translate()：设置元素移动的位置，括号内为x方向距离和y方向距离。

rotate()：设置元素旋转的角度（现在不考虑3d旋转），括号内为角度值，单位deg。

scale()：设置元素缩放的比例，括号内为缩放的倍数。

skewX()：设置元素x方向上的扭曲程度，括号内为角度，单位deg。

skewY()：设置元素y方向上的扭曲程度，括号内为角度，单位deg。

3.2 transform-origin：设置变换的基准点，默认为元素的正中心位置。

4. 渐变

渐变的是背景图片而不是背景颜色。

4.1 渐变的方式

4.1.1 linear-gradient()线性渐变

4.1.2 radial-gradient()经向渐变

4.2 渐变的方向

在渐变的方式中，括号内的第一个参数为渐变的方向。

4.2.1 渐变的方向可以是角度，单位deg。

4.2.2 也可以是to 加方向单词。

4.3 渐变的颜色

在渐变的方式中，括号内的第二个参数为渐变的初始颜色，第三个参数以后为依次需要渐变的目标颜色。

在这些目标颜色的后面还可以设置百分百，这个百分百为该颜色在盒子中出现的位置或是结束的位置，初始颜色的默认开始位置为0%。

5. CSS3新增的图片边框

5.1 border-image-source：边框图片的路径。

5.2 border-image-slice: 边框图片分割方式。

5.3 border-image-repeat: 边框图片的平铺方式。

5.3.1 stretch：使用拉伸的方式填充边框背景，默认值。

5.3.2 repeat：平铺填充，如果遇到边界，超出部分被截断。

5.3.3 round：平铺填充，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

5.3.4 space：平铺填充，图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

5.4 注意

必须给盒子设置border属性和值，不然无法显示边框图片。

6. CSS3中的动画效果

6.1 定义动画

@keyframes 动画名{}。
6.1.1 设置动画初始和结束状态

from{填写动画初始状态，如果不填，初始状态视为默认值}

to{填写动画的最终状态}

6.1.2 设置动画阶段性的状态

0%{}视为初始状态。其余百分比为动画各个阶段需要到达的目标状态。

6.2 调用动画

在需要改变状态的元素中设置一下样式属性。

6.2.1 animation-name: 调用需要的动画名。必须设置。

6.2.2 animation-duration: 动画持续的时间。必须设置。

6.2.3 animation-iteration-count: infinite;设置动画执行的次数，可以设置具体 的数字，也可以设置infinite为无限次数。可选设置。

6.2.4 animation-timing-function: 设置动画的显示效果。可选设置。

6.3 animation的连写

只需要保证第一次出现的时间是动画持续时间，第二次出现的时间是动画延迟时间，其他属性的值先后顺序不做具体要求。