css3CSS伪类是用来添加一些选择器的特殊效果，是用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为

CSS伪类是用来添加一些选择器的特殊效果，是用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

何为伪类?

就是css内置类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}

css3新属性有哪些伪类？

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
CSS3有哪些新特性

在项目开发中我们采用的CSS3新特性有

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
1. @font-face {
2. font-family: BorderWeb;
3. src:url(BORDERW0.eot);
4. }
5. @font-face {
6. font-family: Runic;
7. src:url(RUNICMT0.eot);
8. }
9. .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
10. .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
淘宝网字体使用
1. @font-face {
2. font-family: iconfont;
3. src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
4. }
5. 3. 圆角
```
border-radius: 15px;
```
  4. 多列布局（multi-column layout）
8. 新手上路
9. 新手专区消费警示交易安全 24小时在线帮助免费开店
12. 付款方式
13. 快捷支付信用卡余额宝蚂蚁花呗货到付款
16. 淘宝特色
17. 手机淘宝旺信大众评审 B格指南
20. .mul-col{
21. column-count: 3;
22. column-gap: 5px;
23. column-rule: 1px solid gray;
24. border-radius: 5px;
25. border:1px solid gray;
26. padding: 10px ;
27. }
兼容性不好，还不够成熟。还不能用在实际项目中。

5.阴影（Shadow）
1. .class1{
2. text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
3. }
4. 6.CSS3 的渐变效果
```
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
```
  这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。效果图如下：
  
  7.css弹性盒子模型
  2. 1
  3. 2
  4. 3
  5. 4
  7. .boxcontainer {
  8. width: 1000px;
  9. display: -webkit-box;
  10. display: -moz-box;
  11. -webkit-box-orient: horizontal;
  12. -moz-box-orient: horizontal;
  13. }
  15. .item {
  16. background: #357c96;
  17. font-weight: bold;
  18. margin: 2px;
  19. padding: 20px;
  20. color: #fff;
  21. font-family: Arial, sans-serif;
  22. }
  效果图
  
  8. CSS3制作特效
  1. Transition 对象变换时的过渡效果
  - transition-property 对象参与过渡的属性
  - transition-duration 过渡的持续时间
  - transition-timing-function 过渡的类型
  - transition-delay 延迟过渡的时间
  缩写方式：　　
```
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
```
  拆分方式：
  1. transition-property:border-color, background-color, color;
  2. transition-duration:.5s, .5s, .5s;
  3. transition-timing-function:ease-in, ease-in, ease-in;
  4. transition-delay:.1s, .1s, .1s;
  　　示例代码
  2. .main{
  3. position: relative;
  4. margin: 0 auto;
  5. height:45px;
  6. width: 300px;
  7. background-color:lightgray;
  8. transition:background-color .6s ease-in 0s;
  9. }
  10. .main:hover{
  11. background-color: dimgray;
  12. }

css3

CSS3有哪些新特性

新手上路

付款方式

淘宝特色