前端基础：CSS3 新增属性总结

transition

用于给元素属性变化添加过渡效果，使变化更加流畅自然。基本语法如下：
```
div {
  transition: all 2s ease-in-out 0;
}
```
其中，all 表示所有属性，2s 表示持续 2 秒，ease-in-out 表示从慢速变快，再以慢速结束，0 表示立即开始。

transition 是一个简写属性，用于设置下面四个属性：
- transition-property
  
  使用过渡效果的 CSS 属性名，如果有多个属性，使用逗号隔开。
```
div {
  transition-property: width, height;
}
```
- transition-duration
  
  完成过渡效果需要的时间，属性值的单位是秒或毫秒，默认值 0。
```
div {
  transition-duration: 2s;
}
```
- transition-timing-function
  
  过渡效果的速度曲线。
```
div {
  transition-timing-function: ease-in-out;
}
```
  可选值有：
  - ease（默认值，慢速开始，然后变快，然后慢速结束的过渡效果）
  - ease-in（慢速开始过渡效果）
  - ease-out（慢速结束过渡效果）
  - ease-in-out（慢速开始和结束过渡效果）
  - linear（匀速过渡效果）
  - cubic-bezier(n,n,n,n)（自定义的贝塞尔曲线）
- transition-delay
  
  过渡效果开始前的等待时间，属性值的单位是秒或毫秒，默认值 0（立即开始）。
```
div {
  transition-delay: 2s;
}
```
transform

用于向元素设置 2D 或 3D 的形状、位置转换。属性值为 CSS 函数，多个函数使用空格隔开。基本语法如下：
```
div {
  transform: rotate(90deg) scale(2); /* 旋转 90 度，放大 2 倍 */
}
```
可选值有：
- rotate(a)（旋转，a 表示旋转角度）
- rotate3d(x, y, z, a)（3D 旋转，x，y，z 表示旋转轴 X，Y，Z 坐标方向的矢量，a 表示旋转角度）
- rotateX(a)（沿着 X 轴 3D 旋转，a 表示旋转角度）
- rotateY(a)（沿着 Y 轴 3D 旋转，a 表示旋转角度）
- rotateZ(a)（沿着 Z 轴 3D 旋转，a 表示旋转角度）
- scale(x, y)（缩放，x, y 表示 X，Y 两个维度的缩放向量）
- scale3d(x, y, z)（3D 缩放，x, y, z 表示 X，Y，Z 个维度的缩放向量）
- scaleX(x)（沿着 X 轴缩放，x 表示缩放比例）
- scaleY(y)（沿着 Y 轴缩放，y 表示缩放比例）
- scaleZ(z)（沿着 Z 轴缩放，z 表示缩放比例）
- skew(x, y)（倾斜，x, y 表示 X，Y 两个维度的倾斜角度）
- skewX(x)（沿着 X 轴倾斜，x 表示倾斜角度）
- skewY(y)（沿着 Y 轴倾斜，y 表示倾斜角度）
- translate(x, y)（平移，x, y 表示 X，Y 两个维度的平移量）
- translate3d(x, y, z)（3D 平移，x, y, z 表示 X，Y，Z 个维度的平移量）
- translateX(x)（沿着 X 轴平移，x 表示平移量）
- translateY(y)（沿着 Y 轴平移，y 表示平移量）
- translateZ(z)（沿着 Z 轴平移，z 表示平移量）
- matrix(a, b, c, d, tx, ty)（矩阵，a, b, c, d, tx, ty 表示矩阵的 6 个元素）
- matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)（3D 矩阵，a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p 表示矩阵的 16 个元素）
- perspective(n)（透视，n 表示视点距离）
- 全部属性值可以点击这里查看。
animation

用于给元素添加动画。基本语法如下：
```
div {
  animation: my-rotate 2s linear infinite;
}
```
```
@keyframes my-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```
其中，my-rotate 表示动画的 keyframe 名称，2s 表示持续 2 秒，linear 表示线性过渡，infinite 表示无限循环。

它是一个简写属性，用于设置下面六个属性：
- animation-name
  
  绑定到选择器的 keyframe 名称。
```
div {
  animation-name: my-rotate;
}
```
- animation-duration
  
  完成动画需要的时间，属性值的单位是秒或毫秒。
```
div {
  animation-duration: 2s;
}
```
- animation-timing-function
  
  动画的速度曲线。
```
div {
  animation-timing-function: ease-in-out;
}
```
  可选值有：
  - ease（默认值，慢速开始，然后变快，然后慢速结束的过渡效果）
  - ease-in（慢速开始过渡效果）
  - ease-out（慢速结束过渡效果）
  - ease-in-out（慢速开始和结束过渡效果）
  - linear（匀速过渡效果）
  - cubic-bezier(n,n,n,n)（自定义的贝塞尔曲线）
- animation-delay
  
  动画开始前的等待时间，属性值的单位是秒或毫秒，默认值 0（立即开始）。
```
div {
  animation-delay: 2s;
}
```
- animation-iteration-count
  
  动画播放的次数，默认值 1。
```
div {
  animation-iteration-count: infinite; /* 无限循环 */
}
```
  可选值有：
  - n（n 次，n 为数值）
  - infinite（无限循环）
- animation-direction
  
  是否轮流反向播放，默认值 normal。
```
div {
  animation-direction: alternate;
}
```
  可选值有：
  - normal（默认值，正向播放）
  - alternate（轮流反向播放，奇数次数正常播放，偶数次数向后播放）
box-shadow

用于设置元素的阴影。基本语法如下：
```
div {
  box-shadow: 10px 10px 5px #888888;
}
```
一共可以接收六个值，分别为：
- x-offset（必填，水平偏移量）
- y-offset（必填，垂直偏移量）
- blur-radius（可选，模糊半径，默认值为 0）
- spread-radius（可选，扩散半径，默认值为 0）
- color（可选，阴影颜色，默认继承元素的 color 属性）
- inset（可选，是否内部阴影，默认为外部阴影）
text-shadow

用于设置文本的阴影。基本语法如下：
```
h1 {
  text-shadow: 2px 2px 4px #888888;
}
```
接收的四个值，分别为：
- x-offset（必填，水平偏移量）
- y-offset（必填，垂直偏移量）
- blur-radius（可选，模糊半径，默认值为 0）
- color（可选，阴影颜色，默认继承元素的 color 属性）
border-image

用于设置边框图片。基本语法如下：
```
div {
  border-image: url(img.png) 30 round;
}
```
其中，url(img.png) 表示图片路径，30 表示图片的宽度，round 表示如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

它是一个简写属性，用于设置五个属性：
- border-image-source
  
  图片路径。
```
div {
  border-image-source: url(img.png);
}
```
- border-image-slice
  
  图片的上、右、下、左侧边缘的向内偏移量。
```
div {
  border-image-slice: 50%;
}
```
  可选值有：
  - （数值）
  - （百分比）
  - fill（表示填充）
- border-image-width
  
  图片的宽度，默认值为 1。
```
div {
  border-image-width: 2px;
}
```
  可选值有：
  - （数值，代表对应的 border-width 的倍数）
  - （百分比）
  - （长度，px，vw，em 等）
  - auto（表示自动）
- border-image-outset
  
  图边框图像超过边框盒的量，默认值为 0。
```
div {
  border-image-outset: 2px;
}
```
  可选值有：
  - （数值，代表对应的 border-width 的倍数）
  - （长度，px，vw，em 等）
- border-image-repeat 图片重复方式，默认值为 stretch。
```
div {
  border-image-repeat: round;
}
```
  可选值有：
  - stretch（拉伸）
  - repeat（重复）
  - round（无法完整平铺所有图像，则对图像进行缩放以适应区域。）
border-radius

用于设置元素的圆角半径。基本语法如下：
```
div#a {
  border-radius: 10px; /* 四个角的圆角 */
```
可选值有：
- （长度，px，vw，em 等）
- （百分比）
它是一个简写属性，用于设置以下四个属性：
- border-top-left-radius（左上角圆角）
- border-top-right-radius（右上角圆角）
- border-bottom-right-radius（右下角圆角）
- border-bottom-left-radius（左下角圆角）
rgba

在 CSS3 中，颜色值不再局限于 RGB 和十六进制两种模式，而是可以使用 rgba() 函数。基本语法如下：
```
div {
  background: rgba(255, 0, 0, 0.5); /* 透明度为 50% 的 #ff0000 红色 */
}
```
接收的四个参数分别为：
- red（红色值，取值范围为 0-255）
- green（绿色值，取值范围为 0-255）
- blue（蓝色值，取值范围为 0-255）
- alpha（不透明度，取值范围为 0-1）
linear-gradient

用于生成多种颜色线性渐变的图片，基本语法如下：
```
div {
  background-image: linear-gradient(to right, red, yellow);
}
```
其中，to right 表示渐变方向，red 表示渐变开始颜色，yellow 表示渐变结束颜色。

可以使用 to 属性来设置渐变方向，可选值为：
- to top（渐变到上方）
- to right（渐变到右边）
- to bottom（渐变到下方）
- to left（渐变到左边）
- to top right（渐变到右上角）
- to top left（渐变到左上角）
- to bottom right（渐变到右下角）
- to bottom left（渐变到左下角）
除了使用 to 属性来设置渐变方向外，还可以指定角度：
```
div {
  background-image: linear-gradient(180deg, red, yellow);
}
```
或者设置渐变点：
```
div {
  background-image: linear-gradient(red 5%, green 15%, blue 60%);
}
```
radial-gradient

用于生成多种颜色径向渐变的图片，基本语法如下：
```
div {
  background-image: radial-gradient(circle, red, yellow);
}
```
其中，circle 表示圆的类型，red 表示渐变开始颜色，yellow 表示渐变结束颜色。

圆的类型可选值为：
- circle 圆形渐变。
- ellipse 默认值，椭圆形渐变。
flex

弹性盒模型是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。基本属性如下：
- display: flex
  
  将元素设置为弹性盒模型
```
.flex-container {
  display: flex;
}
```
- flex-direction
  
  设置弹性盒模型的主轴方向
```
.flex-container {
  flex-direction: row;
}
```
  可选值有：
  - row（默认值，水平排列）
  - row-reverse（反向水平排列）
  - column（垂直排列）
  - column-reverse（反向垂直排列）
- flex-wrap
  
  设置弹性盒模型的换行方式
```
.flex-container {
  flex-wrap: wrap;
}
```
  可选值有：
  - nowrap（默认值，不换行）
  - wrap（换行）
  - wrap-reverse（反向换行）
- justify-content
  
  设置弹性盒模型的主轴方向的对齐方式：
```
.flex-container{
  justify-content: center;
```
  可选值有：
  - center（居中对齐）
  - flex-end（对齐容器的末端）
  - flex-start（默认值，对齐容器的开头）
  - space-between（两端对齐）
  - space-around（环绕对齐）
  - space-evenly（均匀对齐）
- align-items
  
  设置弹性盒模型的交叉轴方向的对齐方式
```
.flex-container {
  align-items: center;
}
```
  可选值有：
  - center（居中对齐）
  - baseline（基线对齐）
  - flex-end（对齐容器的末端）
  - flex-start（对齐容器的开头）
  - stretch（默认值，伸展对齐，子元素被拉伸以适合容器）
- align-content
  
  当设置 flex-wrap: wrap 时，可以使用它来设置弹性盒模型各个行的对齐方式：
```
.flex-container {
  align-content: center;
}
```
  可选值有：
  - center（居中对齐）
  - flex-end（对齐容器的末端）
  - flex-start（对齐容器的开头）
  - space-around（环绕对齐）
  - space-between（两端对齐）
  - space-evenly（均匀对齐）
  - stretch（默认值，伸展对齐，子元素被拉伸以适合容器）
- flex
  
  设置元素的弹性值，可以是数值，也可以是百分比，如：flex: 1，flex: 50%。
```
.flex-item {
  flex: 1;
}
```
  它是一个简写属性，用于设置下面三个属性：
  - flex-grow
    
    设置元素相对于其余弹性元素的增长量
```
.flex-item {
  flex-grow: 1;
}
```
  - flex-shrink
    
    设置元素相对于其余弹性元素的收缩量
```
.flex-item {
  flex-shrink: 1;
}
```
  - flex-basis
```
设置元素的基准值，即元素的初始大小

```css
    .flex-item {
      flex-basis: auto;
    }
```
```
  flex: 1 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。
- align-self
  
  覆盖容器的 align-items 属性，设置自身的对齐方式。
```
.flex-item {
  align-self: auto; /* 默认值，与容器的 `align-items` 属性相同 */
}
```
  可选值有：
  - auto（默认值，继承父容器的 align-items 属性）
  - flex-end（对齐容器的末端）
  - flex-start（对齐容器的开头）
  - center （居中对齐）
  - baseline （基线对齐）
  - stretch （伸展对齐，拉伸以适合容器）
- 可以使用 order 属性，改变元素的排列顺序，默认为 0，允许负值，数值越大，越往后。
```
  A
  B
  C
```
  此时，A B C 三个元素顺序未进行设置，顺序是 A B C 。
```
  A
  B
  C
```
  此时，A B C 三个元素的顺序是 C B A 。
- flex-flow
  
  是 flex-direction 和 flex-wrap 的简写属性，可选值是两个属性的属性值的任意组合，如：
```
.flex-container {
  flex-flow: row wrap;
```
grid 网格布局

网格就是一组相交的水平线和垂直线，这些线段划分了网格的列和行，使我们能够按行或列来排列元素。如果说 flex 布局是一维的，那么网格布局就是更加强大的二维。网格布局的基本语法如下：
- display: grid
  
  设置元素为网格布局
```
.grid-container {
  display: grid;
}
```
- grid-template-columns
  
  设置网格的列
```
/* 三列，五等分（1 + 3 + 1）。左右两列的宽度是 1fr，中间列宽度是 3fr。*/
.grid-container#a {
  grid-template-columns: 1fr 3fr 1fr;
}

/* 三列，第一列的宽度是 200px，剩下的空间被分为三份，按比例分配给剩余两列。*/
.grid-container#b {
  grid-template-columns: 200px 1fr 2fr;
}

/* 三列，每列的宽度是 1fr。*/
.grid-container#c {
  grid-template-columns: repeat(3, 1fr);
}

/* 八列，第一列的宽度是 20px，接下来六列的宽度是 1fr，最后一列的宽度是 20px。*/
.grid-container#d {
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}
```
  上面代码中使用了：
  - fr，它是网格引入的一种新的长度单位，1fr 代表网格容器中可用空间的一份。
  - repeat() 函数，它的作用是重复某个值，第一个参数是重复的次数，第二个参数是重复的值。
- grid-auto-rows
  
  在不确定可以被分为几行的情况下，可以通过 grid-auto-rows 来设置网格的行高。
```
/* 每行高度是 100px。*/
.grid-container#a {
  grid-auto-rows: 100px;
}
/* 行高最小 100px，最大为 auto（根据内容的大小来自动变换）。*/
.grid-container#b {
  grid-auto-rows: minmax(100px, auto);
}
```
  上面代码中使用了：
  - minmax() 函数，它的作用是设置最小值和最大值。
- grid-area
  
  设置元素在网格中应该占据的区域。
```
.grid-item {
  grid-area: 1 / 1 / 2 / 2;
}
```
  接收的四个参数，分别是：
  - row-start（开始行的索引，从 1 开始）
  - row-end（结束行的索引，从 1 开始）
  - column-start（开始列的索引，从 1 开始）
  - column-end（结束列的索引，从 1 开始）
  比如上面代码表示，grid-item 元素的网格区域是从第一行第一列开始，到第二行第二列结束。
- grid-gap
  
  设置网格中行与列之间的间隙
```
.grid-container {
  grid-gap: 20px;
}
```
  它是以下属性的简写：
  - grid-row-gap（行间隙）
  - grid-column-gap（列间隙）
- grid-template-rows
  
  设置网格的行
```
/* 三行，每行的高度是 1fr，即 300px / 3 = 100px。*/
.grid-container#a {
  height: 300px;
  grid-template-rows: 1fr 1fr 1fr;
}
```
- grid-template
  
  同时设置网格的行和列。是 grid-template-rows 和 grid-template-columns 属性的简写，行和列通过 / 分割。
```
/* 第一行高 150px，有三列。*/
.grid-container {
  grid-template: 150px / auto auto auto;
}
```
- grid-auto-flow
  
  设置网格内子元素的的排列方向。
```
.grid-container {
  grid-auto-flow: row;
}
```
  可选值有：
  - row（默认值，水平排列）
  - column（垂直排列）
  - dense（紧凑排列）
  - row dense（水平紧凑排列）
  - column dense（垂直紧凑排列）

参考资料：

CSS 参考手册
CSS3 教程
flex 布局的基本概念
网格布局的基本概念
CSS Grid Layout

前端基础：CSS3 新增属性总结

你可能感兴趣的:(前端基础：CSS3 新增属性总结)