CSS3知识点

CSS3提供了强大而且精准的选择器，提供了多种背景填充方案、可以实现渐变颜色、改变元素形状、角度、加阴影效果，新的报纸布局、弹性盒子，ie6混杂模式的盒子模型，新的计量单位，动画效果等等。

CSS3有很大的兼容性问题，IE9以下不兼容CSS3.0，IE10才开始全面支持CSS3。而由于浏览器厂商的不同，我们在使用CSS3的时候，有时候需要单独为每一种浏览器写兼容。

而兼容的方式就是在属性前面加上前缀：

css3 兼容性

前缀	浏览器
-webkit	chrome、safari
-moz	Firefox
-ms	IE
-o	opera

css3 选择器

css3选择器:

1.css3属性选择器 ele[attr=”*(任意位置),^(开头),$(结尾)”]

2.css3伪类选择器

第一组：同一父级下的某个子元素
:first-child
:last-child
:nth-child(n) 同一父级下的第几个子元素 （正着来）

:nth-last-child(n) （倒着来）

（选择li中的第一个文件，背景为蓝色）

第二组：（常用）一类中的某个元素

:first-of-type
:last-of-type
:nth-of-type(n) 一类中的第几个元素 （正着来）
:nth-last-of-type(n) （倒着来）

3.css3条件选择器

E>F F是E的直接子元素
E+F F是E的兄弟节点，而且是E后面的第一个
E~F F是E后面的兄弟节点

CSS3属性

1.border-radius

这个属性是设置圆角的，border-radius: 10px; 这个css属性就可以让这个元素的四个角都变成半径是10px的四分之一圆。

border-radius是一个复合属性，它是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四个属性复合而来。

当我们写一个值的时候，是这四个角都是一样的值。

当我们写两个值的时候，右上角和左下角一样，左上角和右下角一样，而且第一个值代表的是左上角和右下角的圆角度，第二个值代表右上角和左下角的圆角度。

当我们写三个值的时候，第一个值是左上角的值，第二个值右上角以及左下角的值，第三个值是右下角的值。

当我们写四个值的时候，分别是左上、右上、右下、左下的圆角度。

并且这四个属性每一个属性都有两个值，分别代表这个角的两条边，可以设置不同的值。

半圆：

div {
	height:50px;
	width: 100px;
	border-top-left-radius : 50px;
	border-top-right-radius: 50px;
	background-color: red;
}

2.box-shadow

这个属性是为盒子模型设置阴影的，不过比较消耗性能，用多了会使页面变卡。对于需要很多阴影的时候，我们可以用两个同样的盒子模型，通过改变底层盒子的位置来模拟阴影效果。

box-shadow的属性值包括：

box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

其中后面带方括号的属性都可选属性，前两个偏移量是一定要写的属性值。

投影方式默认是向外投影，如果要向内投影的话，就把属性值改为inset。

同一个盒子可以加多个阴影，中间用逗号隔开。

 div {
	height:50px;
	width: 100px;
	background-color: green;
	box-shadow: 10px 10px grey ;
}

3.border-image

这个属性是设置边框背景图片的

这也是一个复合属性，属性值包括：

border-image: url(xxx.png) number(默认单位是px) repeat / round / stretch

number为截取指定图片四周的宽度作为border的背景填充部分。number为一个值的时候是四个值的复合写法。

第一个值代表从上往下截取多少像素作为上边，然后是右边，下边和左边，不填像素也可以。

这个属性首先会固定四个角的图片，然后四边除了角的地方会遵循后面我们写的方式：

repeat是重复中间部分。

round 如果可以放下两个完整图片，就放两个，如果放不开就只放一个拉伸的图片。

stretch 中间只放一个拉伸的图片

4.rgba

我们在css2知道rgb是色值的意思，这里多了一个a代表的是alpha透明度的意思，第四个值alpha的取值范围是[0-1]。

这个属性基本等同于opacity属性和rgb属性的组合形式。

表示的是30%不透明度的红色背景

5.background: linear-gradient

css3可以让我们用渐变的颜色来填充背景颜色。

(1) linear-gradient([direction], color[percent], color[percent], …); 线性渐变

direction是渐变的方向，填写的是角度值，比如180deg，70deg等。当我们的方向是正方向的时候，我们可以用to direction来代替，比如正下方：to bottom，正右方：to right等。

后面的都是填的颜色，而颜色的百分比的意思不是说这个颜色在这个区域内占据的空间，而是到达了这个点之后颜色变成了我们制定的颜色，比如一个div的高度是200，那么我们设置50%的意思是在100的时候颜色变成了我们设置的颜色，而不是说我们设置的颜色占了100大小的意思。

 div {
	height:50px;
	width: 100px;
  background: linear-gradient(0deg, red, blue);
}

(2) radial-gradient(shape at position, color[percent], …);径向渐变

径向渐变即我们平常理解的放射状渐变，第一个值shape设置放射的形状，可以是原型circle、可以是椭圆ellipse。

position是设定一个在区域内开始的坐标点，即圆心位置，可是是两个值，也可以是一个值，一个的时候，第二个数默认是50%。这个值可以是百分数，也可以是像素和方位值。

后面的颜色部分和线性渐变设置颜色即可。

这里注意的是，这个属性一定要写在background属性里面，写在background-color属性里面是不对的。

background:radial-gradient(50px, red,blue);

6.word-wrap

这个属性是文字边界换行的意思，格式为：

word-wrap:break-word;

一旦到达边界，就会强制换行。

我们在最开始的html部分讲到过，在一个div里面输入一连串的英文的时候，由于浏览器无法识别英文的分隔符，所以最后这一串英文会超出div的大小。

现在设置这个属性之后，到达div的边界的时候就会强制换行。

7.font-face

这个属性可以让我们引入自己的字体包。

@font-face{
	font-family: myFitstFont;//给引入的字体起名字
	src:url('sldjf.ttf'),//引入地址的字体包
	url('alsdf.eat') format('eat')
	//同一种字体，不同平台的，引入多次  后面的format是引入的格式，这里就是eat
}

这样写完之后，我们在其他地方就可以通过设置font-family: myFirstFont;来使用我们引入的字体包了。

8.text-shadow

这个属性是文本阴影的意思，和盒子阴影类似，也是比较消耗性能，但是没有盒子那么消耗。

格式为：

text-shadow: x轴偏移量 y轴偏移量 [虚化程度] [颜色]