CSS3的新特性

<p>简单地说，css3是css2的一个升级版，它并没有采用总体结构，而是采用了分工协作的模块化结构。<p>

---

相关参考手册链接：

• http://css.doyoe.com/
• http://www.w3school.com.cn/cssref/css_selectors.ASP

---

兼容性问题

通过 http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
常用的私有前缀

• 谷歌 、苹果： -webkit-
• ie： -ms-
• 火狐：-moz-
• 欧朋：-o-

---

选择器：#

属性选择器：

• E[title] 选中带有title属性的E标签
• E[title="box" ] 选中带有title属性的E标签,并且值为box
• E[title^="box"] 选中带有title属性的E标签,并且值以box开始
• E[title$="box"] 选中带有title属性的E标签,并且值以box结尾
• E[title*="box"] 选中带有title属性的E标签,并且值包含box

伪类选择器：（通过结构进行筛选）#

• E:first-child 选中父盒子中的第一个子元素
• E:last-child 选中父盒子中的最后一个子元素
• E:nth-child(n) 选中父盒子中的第N个子元素
• E:nth-last-child(n) 从后向前选中第n个
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
• E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

• E:only-child(n)     匹配父元素仅有的一个子元素E
  

其他伪类：#

• E:empty 选中内容为空的E元素
• E:not('.box'); 排除 类名的为box的E元素
• E:target 表示E元素被激活是的状态 ，配合锚点使用

  伪元素选择器：#

• ::first-line 第一行
• ::first-letter 第一字母
• ::selection 表示选中的区域 （背景颜色和字体颜色）

渐变：

linear-gradient 线性
radial-gradient 中心向外
例： background:radial-gradient(30px at 50px 50px,yellow,pink);
例：background-image: linear-gradient(135deg, red 0%,red 25%,blue 25%, blue 50%, green 50%, green 75%,pink 75%, pink 100% );

3.jpg

颜色：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
3， RGBA

• Red、Green、Blue、Alpha即RGBA
• R、G、B 取值范围0~255
• A：不具有继承性，即不会影响子元素的透明度
  4，HSLA
• h：色调 0-360
• s:饱和度 0-100%
• l:亮度 0-100%
• a:alpha 0-1

阴影：

• 例：box-shadow: 5px 5px 5px #CCC
• 例：text-shadow：2px 2px 2px #ddd;

background-origin 参考原点

• border-box 以边框做为参考原点；
• padding-box 以内边距做为参考原点；
• content-box 以内容区做为参考点；

剪切：

• background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小

过度：

• transition-property 设置过渡属性
• transition-duration 设置过渡时间
• transition-timing-function 设置过渡速度
• transition-delay 设置过渡延时

transform变换：

记得要和transition一起使用才有动画效果
缩放scale(x, y)
.a{
width: 500px;
height: 200px;
background-image: linear-gradient(135deg, pink,green);
transition: all 2s;
}
.a:hover{
transform: scale(1.2,0.5);
}
移动translate(x, y)
transform:translate(300px,-50%);
旋转rotate(deg)
transform: rotate(-50deg);
透视（perspective）【3d】
要给要设置透视的盒子的父盒子加 perspective :200px;
再给本身设置旋转角度方向 transform:rotateY(52deg);

3D变换：

• 让子盒子保持真正的3d效果，需要给父盒子设置属性；
  transform-style:preserve-3d;
• 关于3d旋转方向的问题：对着正方向去看：都是顺时针旋转的；
• 3d变换属性：
  rotateX： 沿着x轴旋转
  rotateY: 沿着y轴旋转
  rotateZ: 沿着Z轴旋转
  translateX: 沿着x轴移动
  translateY: 沿着y轴移动
  translateZ: 沿着Z轴移动 必须配合透视使用

动画：

• 必要元素：
  a、通过@keyframes指定动画序列；
  b、通过百分比将动画序列分割成多个节点；
  c、在各节点中分别定义各属性
  d、通过animation将动画应用于相应元素；
  @keyframes gun{
  0%{
  transform: rotateX(720deg) rotateY(0deg) rotateZ(0deg);
  }
  50%{
  transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg);
  }
  100%{
  transform: rotateY(720deg) rotateZ(0deg) rotateX(0deg);
  }
  }

---

伸缩布局：

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
方向：默认主轴从左向右，侧轴默认从上到下

等分宽度或高度##

• 先给父盒子设置display: flex;
  再给子盒子设置 flex: 多少等分;
• 在父盒子设置
  从左到右
  flex-direction: row;
  从右到左
  flex-direction: row-reverse;
  从上到下
  flex-direction: column;
  从下到上
  flex-direction: column-reverse;

不设置等分时

• justify-content:主轴对齐方式
  flex-start:从主轴开始的方向对齐
  flex-end:从主轴结束的方向对齐
  center ：居中
  space-around: 在主轴方向上平分主轴的空间
  space-between: 在主轴方向上两端对齐
• align-itmes: 侧轴上对齐方式
  flex-start:从侧轴开始的方向对齐
  flex-end:从侧轴结束的方向对齐
  center ：居中对齐
  stretch:拉伸 （ 拉伸子盒子 ）

是否换行##

• 换行 flex-wrap：wrap；
• 不换行 flex-wrap：nowrap；（默认宽高会被压缩，都显示在同一行）
  给父盒子设置的，要在子盒子宽高之和大于父盒子的宽高是才有效果

字体图标

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了
优点
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；

---

Font Awesome 使用介绍 http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材 http://www.iconsvg.com/

---