CSS3

问答

1.CSS3有哪些常见的新特性？

• CSS选择器
  1.伪类选择器：E:nth-child(n),E:not(),E:empty(),E:checked,E:nth-of-type(n),E:nth-last-of-type(n),E:first-child,E:last-child等
  2.伪元素选择器:E:first-letter,E:first-line,E::selection等
  3.关系选择器:兄弟选择器E~F,相邻选择器E+F等
• 盒模型
  1.box-sizing:border-box
• 边框
  1.border-radius（圆角，画圆、椭圆、半圆等）
  2.box-shodow(添加阴影)
  3.border-image（允许图片作为边框）
• 背景
  1.background-image（背景图片可叠加）
  2.background-size（cover，contain）
  3.background-origin（指定了背景图像的位置区域，border-box,padding-box,content-box）
  4.background-clip(背景剪裁属性是从指定位置开始绘制.content-box,padding-box)
• 渐变
  1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向,语法如下：
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
  background: linear-gradient(angle, color-stop1, color-stop2);
  repeating-linear-gradient() 函数用于重复线性渐变
  2.径向渐变（Radial Gradients）- 由它们的中心定义
  background: radial-gradient(center, shape size, start-color, ..., last-color);
  repeating-radial-gradient() 函数用于重复径向渐变
• 文本效果
  1.text-shadow(适用于文本阴影)
  2.text-overflow(指定应向用户如何显示溢出内容)
  3.word-wrap(自动换行属性允许您强制文本换行)
  4.word-break(规定非中日韩文本的换行规则)
• 字体
  1.@font-face引入自定义字体
• 2D转换
  1.translate(),根据左(X轴)和顶部(Y轴)位置给定的参数平移
  2.rotate()，一个给定度数顺时针旋转的元素
  3.scale() 取决于宽度（X轴）和高度（Y轴）的参数进行缩放
  4.skew() 取决于宽度（X轴）和高度（Y轴）的参数进行发生倾斜
  5.matrix()，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
• 3D转换
  1.rotateX()，rotateY(),rotateZ(),围绕其在一个给定度数X轴/Y轴/Z轴旋转的元素
  2.translateX（),ranslateY（),ranslateZ（),定义 3D的沿X轴，Y轴，Z轴平移
  3.scaleX() scaleY() scaleZ(), 定义 3D 沿X轴，Y轴,Z轴缩放转换
  4.perspective，定义 3D 转换元素的透视视图必须加上
• 过渡
  过渡是元素从一种样式逐渐改变为另一种的效果
  1.指定要添加效果的CSS属性
  2.指定效果的持续时间
• 动画
  @keyframes规则是创建动画。
  1.规定动画的名称
  2.规定动画的时长
• 多列布局

![]L848%8FIK$I)%Q%]4J89.png](https://img.haomeiwen.com/i3361706/d7754dd56dd24b8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 用户界面
  增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框
  ![KF(FBJ]G_)RADB(6{)FRX26.png](https://img.haomeiwen.com/i3361706/4fc3fd4196dc0192.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
• 弹性盒子(Flex Box)
  弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

![U@1IS6OA`LM{P{X)%]ZE4{W.png](https://img.haomeiwen.com/i3361706/9c7c45f222c6c3ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 多媒体查询
  @media针对不同媒体类型可以定制不同的样式规则。

代码题

• 写出如下 CSS3效果的简单事例
  1.圆角， 圆形
  2.div 阴影
  3.2D 转换：放大、缩小、偏移、旋转
  4.3D 转换：移动、旋转
  5.过渡效果
  6.动画
  7.背景色渐变
  代码

• 实现如下全屏图加过渡色的效果
  代码

• 写出如下 loading 动画效果
  代码