版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35770417/article/details/77774357
有关css3的内容：是css2.0的升级,兼容到IE9+，包括IE9；
1.圆角（border-radius），背景（渐变，多背景，背景裁切，背景size....）
，动画，弹性盒，阴影，页面表现，页面布局；
2.媒体查询，多栏布局；
3.微站（移动设备上的），wap站布局；
4.css3浏览器兼容：
-webkit-加前缀；谷歌，Safari；例如：-webkit-border-radius:
-moz-加前缀；火狐，
-o-加前缀；欧朋浏览器，
-ms-加前缀；IE浏览器，
5.新增属性选择器
属性选择器[ attr="val" ]{}; attr就是属性的意思attribute；
语法：E[attr="val"]{}; 拥有属性attr并且属性值等于val的E元素；
E[attr]{}; 拥有属性attr的E元素；
（1）E[attr~="val"]{}; 拥有属性attr并且属性值为一个词列表，列表
包含(等于)
val的E元素
（2）E[attr | ="val"]{}; 拥有属性attr并且
以val-开头(等于)
val的E元素
（3）E[attr ^="val"]{}; 拥有属性attr并且属性值以字符串val
开始
的E元素
（4）E[attr * ="val"]{}; 拥有属性attr并且属性值
包含
val的E元素
（5）E[attr $ ="val"]{}; 拥有属性attr并且属性值以字符串val
结尾
的E元素
6.css新增伪类选择器（结构性伪类），单冒号
（1）E：first-child{}; 匹配父元素的第一个子元素，且这个元素是E
（2）E：last-child{}; 匹配父元素的最后一个子元素，且这个元素是E
（3）E：nth-child(){}; 匹配父元素的第n个子元素，且这个元素是E
n是从1开始的；
E：nth-child( 3 ){};
E：nth-child( 2n ){};
E：nth-child( 2n-1 ){};
E：nth-child( odd ){};奇数
E：nth-child( even ){};偶数
E：nth-last-child(){};匹配父元素中倒数第n个子元素且这个元素为E；
（4）E：only-child{}; 匹配父元素中只有一个子元素，且这个元素为E；
（5）E：first-of-type{}; 匹配父元素中第一个类型为E的元素:
①E必须是一个子元素
②E必须是在它所属的类型中的排序
（6）E：last-of-type{}; 匹配父元素中最后一个类型为E的元素:
（7）E：nth-of-type(){}; 匹配父元素中第n个类型为E的元素
（8）E：nth-last-of-type(){}; 匹配父元素中倒数第n个类型为E的元素
（9）E：empty{}；匹配父元素中为空的E元素；
（10）E：not.box{background:red};不是box的变成红色；
匹配不含有S选择符的E元素；
（11）E：target{}；匹配相关url指向的元素；
（12）E：checked{}；用给表单，匹配选中状态的E元素；
（13）E：disabled{}；用给表单，匹配选中禁用的E元素；
（14）E：enabled{}；用给表单，匹配可用的E元素；
7.伪对象选择器：双冒号
（1）E：：before{}；在元素内部
开始
生成内容；
（2）E：：after{};在元素内部
结尾
生成内容
例子：.box::before{ content="呵呵" };
（3）E：：selection{}；选中元素时高亮显示样式；
（4）E：：first-line{}；设置对象内的第一行字符的样式；
（5）E：：first-letter{}；设置对象内的第一个字符的样式；
8.css3的颜色表示方法：
（1）rgba:red,green,blue,alpha;（取值范围：前三个色值是0~255，最后一个是0~1）
（2）hsla: h色调（对应色盘） 取值范围0~360
s饱和度 取值范围0~100%
l亮度 取值范围0~100%
a透明度 取值范围0~1
9.文字阴影
简写的顺序：
text-shadow：水平方向阴影偏移量 垂直方向偏移量 阴影模糊值 阴影颜色；
中间用空格隔开；
可以写多重阴影，要用逗号隔开；
box-shadow:20px 20px 5px #000 inset;
10.文字描边
简写顺序：
text-stroke：描边的粗细 描边的颜色；（中间用空格隔开；）
11.有关文本
（1）文本超出时显示省略号：
text-overflow：ellipsis；（要配合overflow：hidden；white-space:nowrap;来使用）
overflow:hidden;white-space:nowrap;text-overflow:ellipsis ;
（2）文本超出时裁剪掉多余的部分（默认值）
text-overflow：clip;（要配合overflow：hidden；white-space：no-wrap;来使用）
（3）强制使文字不换行
white-space：no-wrap;
（4）以空格为单位来解析，允许词内换行：
word-wrap：break-word；
（5）允许非亚洲语言文本，任意字断开，比如连续的英文字母之间断行
word-break：break-all；
（6）文本内容对空格的处理方式：
white-space：pre；显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时，不换行。
（7）设置文本流入方向：
文本排版的方式：
direction：rtl;（right to left 从右向左）
ltr；（left to right 从左向右）
*当页面有不同方向流入文本时，上面的这个要配合unicode-bidi:bidi-override;使用
12.定义新字体：@fontface
直接到一个网址去自动生成......然后直接应用到自己的HTML文档当中.......
http://www.iconfont.cn/search/index