css新特性

• 颜色：新增 RGBA，HSLA 模式,新增透明度

// rgba
color:rgba(122,211,122,0.6);
// hsla
//hue - 色相	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
//saturation - 饱和度	定义饱和度; 0% 为灰色， 100% 全色
//lightness - 亮度	定义亮度 0% 为暗, 50% 为普通, 100% 为白
background-color:hsl(120,100%,50%);

• 盒子阴影：（box-shadow）

// 向右偏移距离，向下偏移距离  模糊程度 颜色
box-shadow: 10px 10px 5px #888888;

边框：
边框圆角：（border-radius）
边框阴影：（box-shadow）
边框图片：（border-image）

• 弹性盒子模型：（box-sizing：border-box;）
• 背景：
  background-size ：设置背景图片的尺寸
  background-origin ：设置背景图片的原点（定位、位置）
  background-clip ：设置背景图片的裁切区域，以”，”分隔，可以设置多背景，用于自适应布局。
• 渐变：
  linear-gradient：（线性渐变）

background-image: linear-gradient(red, yellow, blue);

radial-gradient ：（径向渐变）

• 新增过渡效果：
  transition，配合动态伪类使用
• 自定义动画：
  animation 定义动画：@keyframes 动画名称
  媒体查询@media，多栏布局:
  @media screen and (width:500px) {
  …
  }
• 2D 转换：
  transform：translate(x，y) 移动
  rotate(x，y) 旋转
  skew(x，y) 翻转
  scale(x，y) 缩放
• 3D 转换
• 字体图标 ： font-face
• 弹性布局 ：flex
  新增多种选择器（结构伪类选择器、动态伪类选择器、属性选择器等）
  优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器