一、选择器：

分为

1.1关系选择器 

   后代选择器   ul li  选择所有的后代元素

  

  

1.2属性选择器  ：通过属性来选择对应的元素

  css3新增的：

1.3伪类选择器

我们以前学过 before after  a：link

小知识点：

（1）even

（2）nth-child

（3）

1.4其他选择器

（1）input:focus{} => 选择获取焦点的表单

（2）input:enabled{} => 选择可操控的表单元素

（3）input:disabled{} => 选择不可操控的表单

（4）E:target{} =>

（5）E:empty{} =>

（6）Input:checked =>

二、伪元素 before after

作用：渲染一个虚拟的标签插入到当前元素的内部的前面或者后面

总结：

（1）伪元素默认是行内元素，我们可以进行转化，在实际工作中，多用来模拟一些小的标签去装饰

   （可以利用类去覆盖之前的样式）

hover：伪元素

（7）content一定不能省略，即使里面没有内容

三、字体的用法

网址：  阿里

  有字库

兼容：支持所有的浏览器

步骤：（这里列举了阿里的web字体的使用）

（1）进入官网  点击webfont

 

（2）输入对应的文字 然后选择添加字体

 

（3）http,

 

（4）注意修改路径，给文字添加上对应的类

四、 圆角

broder-radius：值

值说明：

 

 

 

 

（1）一个值设置的是盒子的四个角的水平和垂直半径

（2）每个角都可以单独进行设置 

（3）

（4）单位支持像素，和百分比（参照的是宽度和高度）

（5）可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制

（5） 阴影

语法：box-shadow：值

值说明：

（3）第三个值 ：羽化大小 （模糊的大小）

（4）第四个值 ：阴影尺寸

（5）第五个值 ：颜色 默认值是黑色

（6）第六个参数： 内外阴影 默认是外阴影 内阴影是inset

（7）阴影可以写多个，中间用逗号隔开

（8）阴影可以简写，但是需要注意有一些值需要补0

文字阴影

语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色

巧妙运用可以制作文字凹凸效果

（6）边框图片

语法：border-image：值

遵从的是九宫格式切图，上下左右分别来一刀

值说明：

（1）border-image-source:url('border.png'); 图片路径

（2）border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）

（3）border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）

（4）简写：border-image:url('border.png') 26 round;

总结：是以九宫格式的方式切图

（7） 背景系列  （7.1）背景图片的基准点

语法：background-origin：值

值说明：

边框的

padding的

 跟padding有关系

（7.2）多重背景

说明：背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片

（7.3）控制背景图片的大小

语法：background-size：值

 值说明：

（3）contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化

（8）盒子内减 --- 重要

在实际工作中，内减配合百分比布局是实现移动端布局的方式之一

（9）渐变 （9.1）线性渐变

 ,颜色三 位置);

总结：（1）需要添加私有前缀

    （2）起始位置建议用方位名词去控制

（9.2）径向渐变

 ,颜色三 位置);

总结：

（1）

（2）

（9.3）私有前缀

每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性

谷歌 苹果：-webkit-

火狐：-moz-

IE：-ms-

o：-o-

小细节：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）