前端面试笔记8：CSS3新特性(细节到位，内容详实)

CSS3新特性

CSS3 简介

CSS3 是 CSS 的第三个版本，也是目前最新的版本，添加了一些新的特性，如：

• 新增选择器：属性选择器、结构性伪类选择器、伪元素选择器等等。
• 新增属性：border-radius，background-size，box-sizing 等等。
• 新增渐变色：之前都是使用图片进行平铺操作，使用渐变色可以减少服务器的压力和带宽，加快页面渲染。
• 新增变形：平移，缩放，旋转，倾斜等，2d 变形和 3d 变形。
• 新增过渡：从一种效果过渡到另外一种效果。
• 新增动画：
• 新增媒体查询：通过媒体查询实现响应式布局。
• 新增 flex 布局：

CSS3 新增属性介绍

新增盒子阴影、文字阴影

• 盒子阴影

  box-shadow: h-shadow v-shadow blur spread color inset;
  	h-shadow	必需。水平阴影的位置。允许负值。
  	v-shadow	必需。垂直阴影的位置。允许负值。
  	blur		可选。模糊距离。
  	spread		可选。阴影的尺寸。
  	color		可选。阴影的颜色。
  	inset		可选。将外部阴影(outset)改为内部阴影。
  

  注：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值。

• 文字阴影

  text-shadow: h-shadow v-shadow blur color;
  	h-shadow	必需。水平阴影的位置。允许负值。
  	v-shadow	必需。垂直阴影的位置。允许负值。
  	blur		可选。模糊距离。
  	color		可选。阴影的颜色。
  

新增圆角边框

border-radius：固定值 | 百分比(相对父元素)

• 按照值的多少进行分类

  • 单值法：border-radius：10px; 左上角、右上角、右下角、左下角圆角都设置为 10px。
  • 二值法：border-radius：10px 20px; 左上角、右下角为 10px，右上角、左下角为 20px。
  • 三值法：border-radius：10px 20px 30px; 左上角 10px、右上角、左下角为 20px，右下角为 30px。
  • 四值法：border-radius：10px 20px 30px 40px; 从左上角开始顺时针分别设置 10px ，20px ，30px，40px。

• 按照四个边角进行分类

  • border-top-left 设置左上角
  • border-top-right 设置右上角
  • border-bottom-right 设置右下角
  • border-bottom-left 设置左下角

圆形：首先元素必须是正方形，然后设置圆角边框像素值为元素（标准盒）宽或高的一半，但真正好用的是使用百分比 50%（不受 padding ，border 的影响）。

新增线性渐变和径向渐变

CSS3 的渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡；在以前，你必须使用图像来实现这些效果。

通过使用 CSS3 渐变（gradients），你可以减少下载的时间和带宽的使用。

渐变效果的元素在放大时看起来效果更好，因为渐变（gradients）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变(Linear Gradients)

  想要创建一个线性渐变，你必须至少定义两种颜色结点(即你想要呈现平稳过渡的颜色)。同时，你也可以设置一个起点和一个方向(或一个角度)。

  // 浏览器兼容写法
  // -webkit- 兼容谷歌、苹果 -moz- 兼容火狐 -ms- 兼容IE -o- 兼容欧朋
  background-image: -webkit-linear-gradient(direction,color-stop1,color-stop2,...);
  backgroung-image: -moz-linear-gradient(direction,color-stop1,color-stop2,...);
  background-image: -o-linear-gradient(direction,color-stop1,color-stop2,...);
  /*兼容性写法中 direction 值的写法为 top、right、bottom、left、left top、right bottom 等，为起始方向。*/
  
  // 标准写法
  background-image: linear-gradient(direction,color-stop1,color-stop2,...);
  /*标准写法中 direction 的值的写法为 to top、to right、to left、to bottom right 等等，为结束方向。
  
  // 我们还可以设置渐变的位置
  background-image: linear-gradient(direction,color-stop1 position1,color-stop2 position2,...);
  如：background-image: linear-gradient(to right,red 50%,green 90%,blue);
  或者 background-image: linear-gradient(to right,red 200px,green 500px,blue);
  

• 径向渐变(Radial Gradients)

  为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center (表示在中心点)，渐变的形状是 ellipse (表示椭圆形)，渐变的大小是 farthest-corner (表示到最远的角落)。

  语法：background-image: radial-gradient(shape size at position,start-color,...,last-color);
  举例：
  	background-image: radial-gradient(red,green,blue);颜色结点均匀分布（默认情况下）
  	background-image: radial-gradient(red 5%,green 15%,blue 60%); 颜色结点不均匀分布
  	background-image: radial-gradient(red,yellow,green); 默认椭圆 Ellipse
  	background-image: radial-gradient(circle,red,yellow,green); 设置圆形 Circle
  	background-image: radial-gradient(circle at top,red,yellow,green); 设置从顶部开始渐变
  

  定义渐变的位置，可能值：

  • center(默认): 设置中间为径向渐变圆心的纵坐标值。
  • top：设置顶部为径向渐变圆心的纵坐标值。
  • bottom：设置底部为径向渐变圆心的纵坐标值。

  定义渐变的大小，可能值：

  • farthest-corner(默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角。
  • farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。
  • closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
  • closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。

  定义圆的类型：

  • ellipse(默认)：指定椭圆形的径向渐变。
  • circle：指定圆形的径向渐变。

新增选择器

新增了一些属性选择器、结构性伪类选择器和伪元素选择器。

新增 transform 属性

transform 属性就是变形，即平移、旋转、缩放和倾斜。

• translate
• rotate
• scale
• skew

transform 不会对其他元素布局产生影响。

平移 translate

我们可以给 translate 两个参数，让其在 X 轴和 Y 轴上产生平移。

// 将元素向右，向下平移 100px
transform: translate(100px, 100px);

// 将元素向右移动 100px
transform: translateX(100px);

// 将元素向上移动 1em
transform: translateY(-1em);

// 我们也可以使用百分数，但是这里的百分数是相对于图片自身大小的
transform: translate(100%, 100%);

旋转 rotate

// 将元素顺时针旋转 90°
transform: rotate(90deg);

// 也可以用 turn 做单位，一个 turn 就是一圈
transform: rotate(0.5turn);

// 我们可以用 transform-origin 这个属性来改变旋转的原点
transform-origin: 0 0; // 绕图片的左上角进行旋转
transform: rotate(-50deg);

transform-origin: 0 0;
transform: rotate(360deg);

// 我们也可以将元素沿着 X 轴或者 Y 轴进行旋转
transform: rotateX(30deg);
transform: rotateY(30deg);

缩放 scale

// 将元素沿 X 轴和 Y 轴放大 2 倍
transform: scale(2);

// 将元素沿 X 轴放大 3 倍，沿 Y 轴放大 0.5 倍
transform: scale(3,0.5);

// 缩放行为也和 transform-origin 这个属性相关
transform-origin: 0 0;
transform: scale(4);

transform-origin: 0 0;
transform: scaleY(2);

倾斜 skew

// 将元素在 X 轴方向上倾斜 30°
transform: skewX(30deg);

// 将元素在 Y 轴方向上倾斜 50°
transform: skewY(50deg);

// 也可以将元素同时在 X 轴方向上和 Y 轴方向上倾斜
transform: skew(30deg, 20deg);

因为 transform 属性是一个变形函数的列表，所以我们可以让一个元素同时进行多种变形。

// 先让元素沿 X 轴方向移动 100px 然后再顺时针旋转 90°
transform: translateX(100px)
		   rotate(90deg)
		   
// 先让元素顺时针旋转 90°，然后再让元素沿 X 轴方向移动 100px
transform: rotate(90deg)
		   translate(100px)

/*这里我们可以看到上面两个的运行结果是不一样的，因为元素的变形是按照元素自身的坐标系进行的。初始状态下，元素自身的坐标系和页面的坐标系是一样的，但是在元素旋转了 90° 之后，元素的 X 轴变成了向下，所以上面两个的运行结果是不一样的。*/

// 下面这个例子，因为元素的变形是按照自身的坐标系进行的，因为这个坐标系已经放大过了，所以在元素自身的坐标系下移动 100px 就相当于是在页面上移动了 200px。
transform: scale(2)
		   translateX(100px)
		   rotate(90deg)

新增 transition 过渡

语法：transition: property duration timing-function delay;
默认值为: transition: all 0 ease 0;

transition 属性设置元素的过渡效果，四个简写属性为：
	transition-property: 表示 CSS 属性的 name，transition 效果。
	transition-duration: 表示 transition 效果需要指定多少秒或者毫秒才能完成。
	transition-timing-function: 指定 transition 效果的转速曲线。
	transition-delay: 定义 transition 效果开始的时候。
	
注意: 始终指定 transition-duration 属性，否则持续时间为 0 ，transition 不会有任何效果。

新增 animation 动画

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
默认值为: animation: none 0 ease 0 1 normal

animation-name: 指定要绑定到的选择器的关键帧的名称。
animation-duration: 动画指定需要多少秒或毫秒完成。
animation-timing-function: 设置动画将如何完成一个周期。
animation-delay: 设置动画在启动前的延迟间隔。
animation-iteration-count: 定义动画的播放次数。
animation-direction: 指定是否应该轮流反向播放动画。
animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state: 指定动画是否正在运行或已暂停。
initial: 设置属性为其默认值。
inherit: 从父元素继承属性。

transition 和 animation 的区别

• transition 要设置触发条件才会触发， 而 animation 不设置触发条件也会自动地触发。

• transition 只有两种状态导致其只能实现比较简单的效果，而animation 由于百分比的属性使其更加灵活，实现效果更加逼真。

• transition 和 js 的结合性很好，而 animation 更倾向于纯 CSS 的实现，与 js 的结合性不是很好。

• transition 不能修改 CSS 属性，但是 animation 可以修改 CSS 属性。

• transition 不能遍历循环，但是 animation 可以遍历循环。

• transition 子属性少，animation 子属性多。

总的来说 transition 比较简易，animation 比较复杂。