CSS3新特性大致分为以下六类1.CSS3选择器2.CSS3边框和圆角3.CSS3背景和渐变4.CSS3过渡5.CSS3变换6.CSS3animation下面分别说一下上面六大类的内容CSS3选择器1.基本选择器基本选择器分为子选择器相邻兄弟选择器通用兄弟选择器组选择器2.属性选择器1.element[attribute]设置样式为属性attribute的元素2.element[attribute='value']为attribute='value'属性的元素设置样式3.element[attribute~='value']选择value中包含单词的属性value元素并设置样式4.element[attribute*='value']选择attribute属性值包含value的元素设置样式5.element[attribute^='value']选择attribute属性值开始的元素withvalue6.element[attribute$='value']选择attribute属性值以value结尾的元素注意3和4的区别3.伪类选择器动态伪类定义：这些伪类不存在在HTML中，只有当用户和网站进行交互时才能体现出来。1.锚伪类：link:visited2.用户行为伪类：hover:active:focus3.目标伪类：target当我们点击锚链接时，id对应的元素会显示在viewport4.checkedstatus伪类这里要知道checkbox只能设置宽高，不能设置背景和边框。如果我们要设置它，那么我们需要使用appearance:none;清除输入的默认样式CSS3结构类：nthSelector:first-child/last-child语法element:first-child选择属于父元素的第一个/最后一个子元素的每个element元素，注意元素是子元素。:nth-child(n)选取某个元素下的第n个元素元素（n是一个简单的表达式，不能用其他字母代替），也可以在括号中传入奇数和偶数两个关键字：nth-??last-child(n)匹配属于某个元素的第n个元素子元素，从最后一个子元素算起：nth-of-type(n)语法element:nth-of-type(n)匹配属于父元素的元素特定类型的第n个子元素，element为指定类型的子元素：nth-??last-of-type匹配属于父元素的特定类型的第n个子元素，从最后数起：first-of-type/:last-of-type匹配作为其父项的特定类型的第一个/最后一个子项的每个元素：only-child匹配作为父项的唯一子项的每个元素：only-of-type匹配一个元素是它的父元素是特定类型的唯一子元素的每个元素：empty匹配没有子元素的每个元素（包括文本nodes)否定选择器：not定义：匹配所有不是元素或选择器的元素语法：父元素：not(childelementorselector)示例：ul:not(span){}伪元素（也可以使用：)element::first-line定义：设置元素文本的首行，仅对块级元素有效element::first-letter定义：用于设置文本首字母的特殊样式，以及只能用于块级元素element::before定义：在元素内容前插入新内容，常与content结合使用element::after定义：在元素内容后插入新内容，常用结合contentelement::selection定义：用于设置浏览器中选中文本的背景色和前景色伪元素与元素的区别：无法通过JS浏览器开发者工具直接查看伪元素获取其DOM，默认是内联的。使用伪元素的注意事项：1、前后使用伪元素时，必须设置内容。前后使用伪元素设置为display:inline-block，需要重新设置vertical-align:middleCSS3边框和圆角1.CSS3roundedborder-radius定义：可以给元素（块元素、内联块元素、内联元素）添加圆角边框属性：border-top-left-radius左上角border-top-right-radius右上角border-bottom-right-radius右下角border-bottom-left-radius左下角复合属性：border-radius：属性值四个值：左上角右上角右下角左下角三个值：左上角upper右上角和左下角右下角两个值：左上角和右下角右上角和左下角一个值：四个角都生效border-radius中的属性值由两个参数值组成：value1/value2,用/隔开，value1代表圆角的水平半径，value2代表圆角的垂直半径圆和椭圆：一旦使用百分比，参考的就是元素本身的高和宽。取50%时，宽等于高，圆宽不等于高，椭圆2.box-shadow定义：可以控制一个或多个下拉阴影的Box语法：box-shadow:offsetinthehorizo??ntaldirectionoffsetinverticaldirectionfuzzydevelopment)为参考点，求水平方向和垂直方向的偏移量。,但边界线不动从边界线向外模糊了多少像素扩展度：boxshadow，从上、下、左、右分别向外扩展了多少像素？是否有内阴影：inset（默认没有，即默认是外阴影）加上inset，盒子内阴影的阴影可以是负数，但是模糊程度不能是css3背景和渐变1.CSS3背景background-image语法：backgroundimage:url('1.jpg),url('2.jpg')用逗号分隔图片注意：元素引入多张背景图片，前面的图片会覆盖后面的图片背景-cilp定义：指定背景的绘图区域（裁剪）语法：background-cilp:border-box/padding-box/content-box属性介绍：border-box：背景裁剪到边框（裁剪）backgroundimageisdrawnfromtheborder)---defaultpadding-box:backgroundisclippingtotheinnermarginbox(背景图片从内边距绘制)content-box:背景裁剪到内容框background-origin定义：设置背景的原始起始位置dimage语法:background-origin:border-box/padding-box/content-box(背景图片的坐标原点与这三者有关)属性介绍:border-box:相对于borderpadding-box定位:positioningrelativerelativetotheinnermargincontent-box:相对于内容框的定位还有一个需要理解background-position：定义背景图片的位置，水平和垂直方向（参考点）上方的偏移量background-repeatdefinition:设置背景图片是否重复以及如何重复，默认默认情况下，背景图像水平和垂直重复属性值：repeatdefault。背景图像将垂直和水平重复。repeat-x背景图像将水平重复。repeat-y背景图像将垂直重复。no-repeat背景图片只会显示一次。inherit指定background-repeat属性的设置应该从父元素继承。background-size定义：指定背景图片的大小语法：background-size:number/%/cover/contain属性介绍：number：宽度和高度（如果只写一个值，第二个值默认为auto）百分比：0%-100%之间的任意值，此时的百分比是指元素div覆盖的大小：背景图片按比例缩放以填充整个容器（最远的一侧），如果高度达到一定比例时100%，超出宽度会溢出。然而，溢出的具体部分取决于容器的定位：背景图像按比例缩放，直到一侧靠近容器的边缘（最近的边缘）。如果图片高度比较小，复合属性background的高度处会有空白区域定义：一条语句可以设置所有背景属性语法：background:颜色位置大小重复原点剪辑附件图片；background:#abccenter50%no-repeatcontent-boxcontent-boxfixedurl('1.jpg'),url('2.jpg')...2.CSS3渐变定义：可以显示两个或两个之间的过渡更多指定颜色线性渐变定义：沿一个轴改变颜色，从起点到终点进行顺序渐变（从一侧拉到另一侧）语法：background:linear-gradient(direction,startcolor,endcolor)方向介绍：1.从上到下的方向（默认）background:linear-gradient(red,blue);2.方向从左到右的背景：linear-gradient(toright,red,blue);3.对角线背景：线性渐变（到右下角，红色，蓝色）；4.角度（单位deg）背景：linear-gradient(angle,red,blue);角度说明：0deg会创建从下到上的渐变，90deg会创建从左到右的渐变颜色节点：默认每种颜色颜色均匀分布的背景：linear-gradient(red10%,blue20%,green30%,yellow40%);从0%到10%是红色，从10%到20%是从红到蓝的渐变，从20%到30%是从蓝到绿的渐变，从30%到40%是一个渐变从绿色到黄色，从40%到100%是黄色背景：linear-gradient(red10%,blue);从0%到10%是红色，从10%到100%是红色到蓝色的渐变。最后，如果不写具体值，默认100%background:linear-gradient(red,blue30%);从0%到30%，对于从红到蓝的渐变如果第一个没写，默认值为0%background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));通过从透明色到不透明色的重复渐变示例：background:repeating-linear-gradient(90deg,red0%,blue20%);或背景：重复线性渐变（90度，红色0%，蓝色10%，红色20%）；注意：将元素整体宽度看成100%径向渐变定义：从起点到终点，颜色由内向外循环渐变语法：background:radial-gradient(shapesize,startcolor,endcolor)shape类别：circle---roundellipse---ellipse注意：当元素的高和宽相同时，无论设置哪个参数，都是圆的大小：closest-sidenearestsidebackground:radial-gradient(closest-sidecircle,red,blue);最远的最远背景：径向渐变（最远的圆，红色，蓝色）；closest-cornerclosestcornerbackground:radial-gradient(closest-cornercircle,red,blue);最远的角落背景：径向渐变（最远角圆，红色，蓝色）；颜色节点：示例：background:radial-gradient(circle,red50%,blue70%);注意：此时的百分比是指以圆心到重复渐变元素最远端的距离（角度）：例：背景：repeating-radial-gradient(red0%,blue20%);背景：重复径向渐变（红色0%，蓝色10%，红色20%）；CSS3过渡定义：允许CSS属性值在一定时间间隔内平滑过渡，当鼠标点击、鼠标悬停或元素发生任何变化时触发，以动画的形式平滑改变CSS属性值属性：1.transition-property属性定义：设置对象中transition涉及的属性语法：transition-property：none|all|property参数说明：none：没有属性改变all：默认值，所有属性改变property：元素的属性名称宽度、颜色等2.transition-duration属性定义：设置对象过渡的持续时间语法：transition-duration:time参数说明：指定完成过渡效果所花费的时间，单位为秒或毫秒，默认值为03.transition-timing-function属性定义：设置对象中的过渡动画类型语法：只能使用一个属性值参数说明：ease：平滑过渡（0--slow-fast-slow），默认valuecubic-bezier(0.25,0.1,0.25,1)linear：线性过渡（匀速）cubic-bezier(0,0,1,1)ease-in:slow--fastcubic-bezier(0.42,0,1,1)ease-out:Fast--slowcubic-bezier(0,0,0.58,1)ease-in-out：慢--快--slowcubic-bezier(0.42,0,0.58,1)贝塞尔曲线：http://cubic-bezier.com/#.17,...4.transition-delay属性定义：设置对象延迟语法的过渡时间：transition-delay:time参数说明：指定动画效果延迟开始的秒数或毫秒数，默认是05.Transition复合属性语法：transition:属性durationtiming-functiondelay;参数说明：transitiontime和delaytime的顺序不能乱CSS3transform定义：让一个元素在一个坐标系中变形，该属性包含一系列Transform函数，可以对元素进行移动、旋转、缩放。语法：变换：无|
