文章目录
1 、介绍CSS3的主要新特性：CSS3的属性前缀1）主流浏览器内核2）厂商前缀 2、CSS3选择器1）属性选择器2）结构性伪类①:root 匹配HTML标签,与body选择器效果一样②子元素选择器:匹配父元素中连续的子元素③nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况④其他 3）目标伪类4）UI元素状态伪类5）否定伪类6）通用兄弟元素选择器 3.CSS3文本1） 文本阴影（主流浏览器都支持，（IE9以上支持））2）文本自动换行（主流浏览器都支持）3）单词拆分（主流浏览器都支持）4）文本拆分（所有主流浏览器都不支持）5）文本溢出a)单行文本溢出（重要）b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持） 4.CSS3边框1）圆角边框（掌握）2）边框阴影（IE9以上支持）3）边框图片(IE11.0及以后版本支持） 5.CSS3背景1）多重背景2）background-size：设定背景图像的尺寸。3）background-origin：指定背景图像的位置区域。4）background-clip：设定背景的绘制区域。5）渐变背景 6.CSS3颜色函数1）RGBA2）HSL3）HSLA 7.opacity8.CSS3渐变1）线性渐变2）径向渐变(沿半径方向渐变）3）文字渐变 9.box-sizing1 、介绍
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，它是对CSS的一个扩展。2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模
块 。
CSS3的主要新特性：
1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询
CSS3的属性前缀
CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性。
1）主流浏览器内核
Trident内核：主要代表为IE浏览器Gecko内核：主要代表为FirefoxBlink内核（是Webkit的一个分支）：主要代表为Chrome和OperaWebkit内核：产要代表为Chrome和Safari目前国内的浏览器大多都是双核的（IE内核+Chrome内核）
2）厂商前缀
IE： -ms-Chrome&Safari： -webkit-FireFox： -moz-Opera： -o-2、CSS3选择器
丰富选择的目的：在标签中减少class和id属性的使用。
1）属性选择器
[属性名]
/* 匹配具有class属性的元素 */p[class]{color: #ff0000;}
[属性名=属性值]
/* 匹配具有class属性且属性值为content的元素 */p[class=content]{color: #ff0000;}
[属性名^=属性值]
/* 匹配具有class属性且值以content开头的元素 */p[class^=content]{color: #ff0000;}
[属性名$=属性值]
/* 匹配具有class属性且值以content结尾的元素 */p[class$=content]{color: #ff0000;}
[属性名*=属性值]
/* 匹配具有class属性且值含有content的元素 ，div用~，p标签用**/p[class*=p]{color: #ff0000;}div[class~=xxx]{color: #0000FF;}
2）结构性伪类
①:root 匹配HTML标签,与body选择器效果一样
:root
/* :root{background: #BC8F8F;}*/body{background: #BC8F8F;}
②子元素选择器:匹配父元素中连续的子元素
:first-child匹配父元素中第一个子元素
p:first-child{background: #00FF00;}
:last-child匹配父元素中最后一个子元素
:nth-child(n)匹配父元素中第n个子元素
:nth-last-child(n)匹配父元素中倒数第n个子元素
③nth-of-type类：用于匹配父元素中兄弟子元素，可以用于子元素非连续的情况
:nth-of-type(n)匹配同类型中的第n个同级兄弟元素
/* 找的是p标签中的第三个兄弟p标签，如果第三个不是P标签，将跳过，继续向下寻找，直到找到为止 */p:nth-of-type(3){color: #005FBD;}
:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素
/* 找的是p标签中倒数第二个兄弟p标签，如果不是P标签，将跳过，继续向前寻找，直到找到为止 */p:nth-last-of-type(2){color: #8B008B;}
④其他
:only-child父元素中仅有一个子元素
p:only-child{width: 100px;height: 100px;background-color: #888888;} /* 查找的是父元素中仅有一个标签且为p标签 */
:only-of-type父元素中仅有一个兄弟元素
p:only-of-type{width: 100px;height: 100px;background-color: #FF0000;}/* 父元素中只有一个p标签，但是有其他兄弟标签 */
:empty没有元素，包括文本元素，既查找空元素
3）目标伪类
:target匹配相关URL指向的元素
<a href="#jump1">跳转1</a><a href="#jump2">跳转2</a><a href="#jump3">跳转3</a><p id="jump1">这是段落1的内容</p><!-- id="jump1"这里的id表示设置了1个锚点，进行页内跳转 --><p id="jump2">这是段落2的内容</p><p id="jump3">这是段落3的内容</p>
p:target{color: #FF0000;}
4）UI元素状态伪类
:checked匹配所有用户界面（form表单）中处于选中状态的元素，(只在Opera浏览器中有效)
:disabled匹配所有用户界面（form表单）中处于不可用状态的元素，含有disable的元素会被选中
:enabled匹配所有用户界面（form表单）中处于可用状态的元素，不含有disable的元素会被选中
:selection高亮显示被选中的文本，注意必须使用双冒号
<form action=""><input type="text" disabled><br><input type="text"><br><input type="text"><br><input type="checkbox" name="face" checked>党员<input type="checkbox" name="face" >团员<input type="checkbox" name="face" >无党派人士<br><select><option >大前端开发</option><option selected>大数据开发</option><option >UI设计</option></select></form>
input:disabled{background: #005FBD;}input:enabled{background: #F4FF57;}input:checked:{/* :checked只在opera中有效 */border: 1px solid #0000FF;}::selection{/* 高亮显示被选中的文本 */color: #00FF00;}
5）否定伪类
:not()匹配所有不匹配简单选择符s的元素
<div class="con"><p>11</p><p>22</p><span>span</span></div>
p{height: 10px;}.con :not(p){/* 匹配所有不是p标签的标签 */color: #f00;background-color: #000000;}
6）通用兄弟元素选择器
E~F匹配E元素之后的F元素
<div class="text"><div class="div1">div1</div><div class="div2">div2</div><strong>strong</strong><div class="div3">div3</div></div>
.div1~ .div3{color: #0000FF;}
3.CSS3文本
1） 文本阴影（主流浏览器都支持，（IE9以上支持））
text-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];
<h2>阴影测试</h2>
h2{text-shadow: 1px 1px 1px #fff;color: #0000FF;background: #000000;font-size: 56px;}
2）文本自动换行（主流浏览器都支持）
word-wrap: normal（断点字换行）|break-word（在长单词或者URL地址内部进行换行）;
.z p{width: 100px;height: 510px;word-wrap: normal;background-color: #0000FF;}.x p{width: 100px;height: 510px;word-wrap: break-word;background-color: #0000FF;}
3）单词拆分（主流浏览器都支持）
word-break:
normal(使用浏览器默认换行规则)break-all（允许在单词内换行）keep-all;（只能在半角空格或连字符处换行）
<p>dddddddddddddddddddddddd ddddddddddd dddddd</p><p class="x1">dddddddddddddddddddddddd ddddddddddd dddddd</p><p class="x2">dddddddddddddddddddddddd ddddddddddd dddddd</p><p class="x3">dddddddddddddddddddddddd ddddddddddd dddddd</p>
p{width: 100px;height: 510px;border:1px solid #452200;}.x1{word-break: normal;}.x2{word-break: break-all;}.x3{word-break: keep-all;}
4）文本拆分（所有主流浏览器都不支持）
text-wrap: normal|none|unrestricted|suppress;
5）文本溢出
a)单行文本溢出（重要）
text-overflow: clip|ellipsis|string;
处理文字溢出样式：
width: px/%/em/rem…;
white-space: nowrap; /* 为允许折行/
-ms-text-overflow: ellipsis; /处理IE兼容 */
text-overflow: ellipsis;
overflow: hidden;
p{width: 300px;white-space: nowrap; /* 为允许折行 */border: 1px solid #000;}/* 单行文本溢出 */.p2{-ms-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;}.p3{-ms-text-overflow: clip;text-overflow: clip;overflow: hidden;}
b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）
width: px/%/em/rem…;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;
/* 多行文本溢出 */.p4{width: 300px;white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
4.CSS3边框
1）圆角边框（掌握）
border-radius: 1-4 length|% / 1-4 length|%;
四个方位的词：top-left/top-right/bottom-left/bottom-right
/* 1）圆角边框 */.boeders {width: 200px;height: 200px;border: 1px solid #000000;margin: 100px auto;/* -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; *//* 第一个参数对应的是左上和右下，第二个参数对应右上和左下 *//* -webkit-border-radius: 10px 20px;-moz-border-radius: 10px 20px;border-radius: 10px 20px; *//* 第一个参数对应的是左上，第二个参数对应右上和左下 ，第三个参数对应的是右下*//* -webkit-border-radius: 10px 20px 30px;-moz-border-radius: 10px 20px 30px;border-radius: 10px 20px 30px;*//* 参数对应的是左上，右上 ，右下，左下*//* -webkit-border-radius: 10px 20px 30px 40px;-moz-border-radius: 10px 20px 30px 40px;border-radius: 10px 20px 30px 40px; *//* -webkit-border-radius: 20%;-moz-border-radius: 20%;border-radius: 20%; *//* 左上角 *//* -webkit-border-top-left-radius: 20%;-moz-border-top-left-radius: 20%;border-top-left-radius: 20px; *//* 右上角 左下角 *//* -webkit-border-top-right-radius: 20%;-moz-border-top-right-radius: 20%;border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20%;-moz-border-bottom-left-radius: 20%;border-bottom-left-radius: 20px; *//* 圆 */-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
2）边框阴影（IE9以上支持）
box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];
.box{width: 200px;height: 200px;margin: 0 auto;background-color: #008000;-webkit-box-shadow:inset 1px 1px 5px #FF0000 ;-moz-box-shadow: inset 1px 1px 5px #FF0000 ;box-shadow: inset 1px 1px 5px #FF0000 ;}
3）边框图片(IE11.0及以后版本支持）
border-image：图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;
div {margin: 0 auto;}.zzz .div1{width: 200px;height: 200px;margin-top: 50px;background-color: #005FBD;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_075827.jpg) 10 round;-moz-border-image: url(../img/微信图片_075827.jpg) 10 round;-o-border-image: url(../img/微信图片_075827.jpg) 10 round;border-image: url(../img/微信图片_075827.jpg) 10 round;}.zzz .div2{width: 200px;height: 200px;margin-top: 50px;background-color: #88180F;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_075827.jpg) 10 repeat;-moz-border-image: url(../img/微信图片_075827.jpg) 10 repeat;-o-border-image: url(../img/微信图片_075827.jpg) 10 repeat;border-image: url(../img/微信图片_075827.jpg) 10 repeat;}.zzz .div3{width: 200px;height: 200px;margin-top: 50px;background-color: #00FF00;border: 10px solid transparent;-webkit-border-image: url(../img/微信图片_075827.jpg) 10 stretch;-moz-border-image: url(../img/微信图片_075827.jpg) 10 stretch;-o-border-image: url(../img/微信图片_075827.jpg) 10 stretch;border-image: url(../img/微信图片_075827.jpg) 10 stretch;}
重复效果：round/strech/repeat
5.CSS3背景
1）多重背景
background: 背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,…
2）background-size：设定背景图像的尺寸。
background-size: 固定长度|百分比值|cover|contain;
3）background-origin：指定背景图像的位置区域。
background-origin: padding-box|border-box|content-box;
4）background-clip：设定背景的绘制区域。
background-clip: border-box|padding-box|content-box;
5）渐变背景
background-image: 线性渐变｜径向渐变
div{width: 500px;height: 500px;margin: 100px auto;/* background: url(images/ufo.png) no-repeat 50% 100%,url(images/stars.png) no-repeat 0 0,url(images/sky.png) no-repeat 0 0; */ /*效果等同于下面三条*/background-image: url(images/ufo.png),url(images/stars.png),url(images/sky.png);background-position: 50% 100% ,0 0, 0 0;background-repeat: no-repeat;}
6.CSS3颜色函数
1）RGBA
rgba(r,g,b,a)
r:红色 取值范围：0-255/0-100%g:绿色 取值范围：0-255/0-100%b:蓝色 取值范围：0-255/0-100%a:不透明度 取值范围：0-1的一个小数
2）HSL
hsl(h,s,l)
h:色调 取值范围：0-360s:饱和度 取值范围：0-100%l:亮度 取值范围：0-100%
3）HSLA
hsla(h,s,l,a)
h:色调 取值范围：0-360s:饱和度 取值范围：0-100%l:亮度 取值范围：0-100%a:不透明度 取值范围：0-1的一个小数
7.opacity
调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：filter:alpha(opacity=数值）数值的范围：0-1008.CSS3渐变
渐变主要用来设置背景或制作三维图。
1）线性渐变
background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, …);
方向：
to left:从右向左渐变to right:从左向右渐变to top:从下向上渐变to bottom:从上向下渐变to top left:从右下角向左上角渐变to top right:从左下角向右上角渐变to bottom left:从右上角向左下角渐变to bottom right:从左上角向右下角渐变
角度：
比如45度角，应该表示为：45deg
颜色取值：
表示颜色的单词16进制颜色表示颜色的函数（rgb()/rgba()/hsl()/hsla()…)
2）径向渐变(沿半径方向渐变）
background: radial-gradient(形状 渐变大小 at 位置,颜色1 百分比, …, 颜色n 百分比);
形状：
ellipse:椭圆径向渐变（默认）circle:圆径向渐变
渐变大小：
farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）closest-side:渐变的半径长度为从圆心到离圆心最近的边closest-corner:渐变的半径长度为从圆心到离圆心最近的角farthest-side:渐变的半径长度为从圆心到离圆心最远的边
位置：
center:设置圆心在中心位置（默认）top:设置圆心在顶部位置bottom:设置圆心在底部位置at 圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处
3）文字渐变
background-image: 线性渐变或径向渐变; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
