CSS3 新增功能

# CSS3基础

CSS3是css的升级版本

css是从css1.0、css2.0、css2.1和css3.0这几个版本一直升级而来，其中css2.1是css2.0的修订版，css3。0是最新版

+ 我们平常所说的css其实是指css2.1，而css特指相对陈述事实2.1“新增加的属性”

+ css3.0相对css2.1来说，增加了很多属性和方法，最典型的就是圆角，变形和动画

+ 在css2.1中，为标签设置圆角是一件非常麻烦的事情，实现动画也大多使用jQuery来实现

+ css3最大的好处是：以前需要使用图片或JavaScript来实现的效果，现在只需要几句css代码就可以实现。

### 新功能

1. 选择器

2. 文本效果：文字阴影textshadow属性，潜入字体@font-face等

3. 颜色效果：如RGBA颜色，不透明opacity等

4. 边框效果：边框圆角border-radius，边框阴影box-shadow等

5. 背景效果：背景大小background-size，背景切片background-clip等

6. css变形比如位移translate()，缩放scale()等

7. CSS过度:transition

8. CSS动画

9. 多列布局

10. 弹性盒子模型

11. 用户界面：调整尺寸的resize，外轮廓线的outline属性

12. 媒体查询

## 浏览器私有前缀

目前有哪些浏览器内核？

1. Chrome -webkit-

2. Safari -webkit-

3. Opera -o-

4. Firefox -moz-

5. IE -ms-

### 选择器

+ 属性选择器

E[attr^="lyve"]

E[attr$="lyve"]

E[attr*="lyve"]

+ 结构伪类选择器

第一类

E:first-child

E:lat-child

E:nth-child(n) n可以是数字也可以是odd或even

E:only-child 获得父元素中的唯一子元素

第二类

E:first-of-type 选择同类的第一个兄弟级元素

E:last-of-type 选择同类的最后一个兄弟级元素

E:nth-of-type(n) n可以是数字也可以是odd或even

E:only-of-type 选择父元素中特定类型的唯一子元素

第三类

E:root 选中html

E:not(selector)

E:empty 标签里面什么都没有写（写了文字就不算空元素）

E:target

+ UI元素状态伪类选择器

E:focus

E:checked

E::selection

E:enable

E:disable

E:read-write

E:read-only

E::before

E::after

### 长度单位

px特点

IE无法调整使用px作为单位的字体大小

em

em相对当前对象内文本的字体尺寸，如当前行内文本未设置字体尺寸，则相对与浏览器默认字体尺寸

1. em值并不是固定的

2. em会继承父级元素的字体大小

rem

rem是css3新增的一个相对单位（root em），这个单位引起了广泛关注。

这个单位和em有什么区别？

区别在于使用rem为元素设定大小时，仍然是相对大小，相对的是根元素HTML的字体大小。

这个单位可谓集相对单位大小和绝对大小的优点于一身，通过它既可以做到做到只改变根元素就能成比例的修改调整所有的字体大小，又可以避免字体大小逐层复合的连锁反应

目前，除IE8以及更早版本之外，所有浏览器都支持rem。

对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位申明，这些浏览器就会忽略用rem设定的字体大小。

例如：

p{font-size:14px;font-size:.875rem};

### 文本属性

+ text-shadow (可以四条边分别设置)

+ text-overflow

+ word-wrap

+ text-stroke

> text-shadow:x-offset y-offset blur color;

> word-wrap:break-word //默认值是normal

### 颜色

+ opacity

取值范围0-1,0表示完全透明，1表示完全不透明，书写小数时可以省略0.直接写 .3 ，不允许是负数。

+ RGBA

R：红色，G：绿色，B：蓝色，A：透明度（Alpha）

### 渐变

线性渐变

background:linear-gradient(方向,开始颜色,结束颜色);

> 指的是在一条直线上进行渐变，网页中大多数渐变效果都是线性渐变的。

预设值|角度

----|----

to top,|0deg

to right,|90deg

to left,|270deg

to bottom,|180deg

to top left,|

to top right,

to bottom left,

to bottom right;

径向渐变

background:radial-gradient(position,shap,size,start-color,stop-color);

position 圆心位置

> 预设值：center，top，right，left，bottom

shape 形状

> circle圆形 ellipse/椭圆

> 是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）