CSS animation-duration 属性 ，css动画效果周期循环    实例    为 @keyframes 动画规定一个名称： div { animation-duration:2s; -webkit-animation-duration:2s; /* Safari 和 Chrome */ }    定义和用法    animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。                

CSS animation-direction 属性，是否应该轮流反向播放动画

实例

暂停动画：

div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

CSS animation-delay 属性 运动，动画元素，div实例等待两秒，然后开始动画：div { animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */ }定义和用法animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计。提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。默认值：0继承性：no版

CSS all 属性 继承父元素，或应用于所有值

实例

将应用于元素或元素父元素的所有属性更改为其初始值：

div {
  background-color: yellow;
  color: red;
  all: initial;
}

   CSS align-self 属性 在弹性容器、div中设置元素位置    实例    把弹性元素内的项目之一居中对齐： #myBlueDiv {  align-self: center; }    定义和用法    align-self 属性指定弹性容器内所选项目的对齐方式。    注意：align-self 属性将覆盖弹性容器的 align-items 属性。                                    

   CSS align-items 属性 对齐方式设置    实例    将弹性 <div> 元素的所有项目的居中对齐： div {  display: flex;  align-items: center; }    定义和用法    align-items 属性为弹性容器内的项目指定默认对齐方式。    提示：请使用每个项目的 align-self 属性来覆盖这个 align-items 属性。                  

   CSS align-content 属性    实例    将行打包到弹性容器的中央： div {  width: 70px;  height: 300px;  border: 1px solid #c3c3c3;  display: flex;  flex-wrap: wrap;  align-content: center; }    定义和用法    align-content 属性修改 flex-wrap 属性的行为。它与 align-ite

CSS 函数CSS 函数用作各种CSS属性的值。函数描述attr()返回所选元素的属性值。calc()允许您执行计算来确定 CSS 属性值。cubic-bezier()定义三次贝塞尔曲线。hsl()使用色相-饱和度-亮度模型（HSL）定义颜色。hsla()使用色相-饱和度-亮度-阿尔法模型（HSLA）定义颜色。linear-gradient()将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。radial-gradient()将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。re

   CSS var() 函数,自定义元素属性插入css样式中    实例    首先定义一个名为 "--main-bg-color" 的自定义属性，然后使用 var() 函数在样式表中插入该自定义属性的值： :root {  --main-bg-color: coral; } #div1 {  background-color: var(--main-bg-color); } #div2 {  background-color: var(--ma

CSS rgba() 函数 不透明度 RGB 颜色实例定义不同的带不透明度 RGB 颜色（RGBA）：#p1 {background-color:rgba(255,0,0,0.3);} /* 带不透明度的红色 */ #p2 {background-color:rgba(0,255,0,0.3);} /* 带不透明度的绿色 */ #p3 {background-color:rgba(0,0,255,0.3);