css3
简介：与H5一样，css3就是css的一个新版本，新增了很多功能让开发更便捷有趣
现状：
浏览器支持程度较差，需要加前缀
移动端支持优于PC端
不断改进中，部分原JS实现的效果，css3也能做到
应用广泛
属性选择器
css3中新增了许多灵活查找元素的方法，让获取元素更加的精确，并且css3选择器与jQuery中所提供的绝大部分选择器兼容
E[attr]获取有attr属性的E元素，例如：div[class]E[attr=val]获取属性值完全等于val的E元素，=号是严格匹配，例如：div[class=red]E[attr*=val]获取属性值里包含val字符并且在“任意”位置的E元素，只要有val就行，例如：div[class*=dvaler]E[attr^=val]获取属性值里包含val字符并且在“开始”位置的E元素，例如：div[class^=value]E[attr$=val]获取属性值里包含val字符并且在“结束”位置的E元素，例如：div[class$=itval]
可以发现其实是用到了正则的匹配符号
伪类选择器
相对于兄弟元素的结构伪类
+获取相邻满足条件的兄弟元素，例如：.index + li获取样式名为index元素相邻的li元素，必须是相邻且为li的兄弟元素才能被获取到~获取满足条件的兄弟元素，例如：.index ~ li获取样式名为index元素的所有兄弟li元素，只要是它的兄弟li元素都能获取到
相对于父元素的结构伪类(比较抽象，着重理解)
比如：
E:first-of-type获取E元素父元素中所有E元素的第一个；E:nth-of-type(2)获取到E元素父元素中所有E元素，索引为2的那个；E:nth-of-type(odd)获取到E元素父元素中所有E元素，索引为奇数的项；E:nth-last-of-type(-n+5)获取到E元素父元素中所有E元素的最后五项总结就是，使用
of-type限制后，过滤其他子元素，只找E元素，一般建议用of-type的写法
索引是数字，注意这里面索引是从1开始。如果写索引就是获取到E元素父元素内，索引为几的子元素。如果索引对应的元素不是E，那么获取不到
关键字有
even和odd。如果写关键字就是获取E元素父元素内，偶数或者奇数索引的所有子元素，如果偶数或者奇数项中有不是E的元素，那么获取不到表达式涉及到了一个默认参数n，它会自动计算E元素父元素内部的所有子元素个数，以线性递增的方式，0,1,2,3,4,5....依次类推，n的用法特别多，具体看教案笔记。要知道是，
如果用n来参与运算，那么整个表达式的结果才是真正的n
E:first-child获取到E元素的父元素内部的第一个子元素且必须是E元素，如果其父元素内部的第一个子元素不是E元素，那么获取不到E:last-child获取到E元素的父元素内部的最后一个子元素且必须是E元素，如果其父元素内部的最后一个子元素不是E元素，那么获取不到E:nth-child(索引||关键字||表达式)重点：记住上面的伪类都有一个缺陷，就是没有限制类型，如果是E元素就能获取，不是E元素就无效。这时将
child改为of-type，限制只获取E元素，其他子元素都会被过滤掉，解决问题E:empty获取E元素父元素内部，没有任何内容的E元素(有空格都不行)
锚点结构伪类
E:target获取当前触发锚点的目标元素，简单来说：当你点击锚点的时候，锚点对应的那个目标元素就会被获取到
伪元素选择器
什么是伪元素
伪元素就是指在页面中显示，但是DOM树结构中却找不到它。每一个DOM元素都有伪元素
伪元素默认是行内元素，必须设置content属性，哪怕不写内容
它的优点是不在DOM里面生成，所以会减少资源的消耗。但缺点同样是因为不在DOM中，所以JS也不能获取操作它
常用的伪元素：
::before在元素内容前面添加::after在元素内容后面添加::first-letter获取元素文本内容的第一个字符，注意它的优先级高于下面两个，如果设置了那么下面两个伪元素设置的大部分样式都不会其效果，但不是全部::first-line获取元素文本的第一行::selection获取并设置元素内容被选中的文字，只能修改显示样式不能修改文字大小
兼容老浏览器写法是只写单冒号，新浏览器单冒号也识别
新增颜色设置方法
rgba(红，绿，蓝，透明度)这个之前记过hsla(色调，饱和度，明亮度，透明度)下面对几个参数做介绍：红色(0,360),橙色30，黄色60，绿色120，青色180，蓝色240，紫色300。其实就是0-360的取值，度数变化颜色也会变化
饱和度取值0%-100%，就是颜色的本色强度，越低颜色越淡，一般建议是100%
明亮度取值0%-100%，越高越白，越低越黑。一般建议50%，注意css3中50%就等同于ps中的100%
透明度取值0-1，不再说明
色调就规定显示什么颜色，与rgb有点区别的是，css3将颜色做了一个环的处理，七彩色围绕成一个环：
这两个方法设置的透明度优于
opactiy的地方是：都只对当前元素生效，对内部元素不影响。大部分情况下设置颜色用拾色器就能获取到值
文本阴影设置
text-shadow:距离(左边偏移值，上边偏移值)，模糊值，颜色某些效果需要设置多层阴影来实现，多层阴影设置用逗号分隔即可
盒模型设置
在之前的css中，如果给盒子添加padding和border的时候，会让宽高增加。因为默认给盒子的宽高只是限于内容区域，而border和padding是内容之外的，所以添加就会撑开
css3中为了解决这样而引起的网页混乱问题，添加了box-sizing属性
box-sizing: border-box||content-box，属性介绍：content-box就是原有css设置方法，宽高设置给内容区域border-box是让盒子设置的宽高包含了内容内边距边框，这样设置后就算你添加内边距和边框都不会撑开盒子，它会挤压内容的宽高，把空间给内边距和边框。好处是盒子的总宽高不会变，也就不会影响盒子布局了
浏览器兼容性：
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀
-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-
边框圆角
border-radius可以通过每个角点来设置边框的圆角，以下是对值书写方式的说明：border-radius:*px将创建四个大小一样的圆角border-radius:*px *px第一个值表示左上角、右下角；第二个值表示右上角、左下角border-radius:*px *px *px第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角border-radius:*px *px *px *px四个值分别表示左上角、右上角、右下角、左下角
上面是统一设置圆角，下面介绍单个圆角设置方法：
border-top-left-radius:*px设置左上角圆角border-top-right-radius:*px设置右上角圆角border-bottom-right-radius:*px设置右下角圆角border-bottom-left-radius:*px设置左下角圆角
补充说明：
设置每个圆角的属性值既可以设置一个，也可以设置两个。如果设置一个表示水平和垂直坐标值相同，如果设置两个就分别是水平坐标和垂直坐标（其实画圆就是以角点为基准， 走设置的距离，然后将水平和垂直位置的交叉点作为圆心画圆），例如:
border-top-left-radius:10px/20px就是分别设置距离如果想要每个点每个方向的距离都不相同还可以这样写：
border-radius:10px 20px 30px 40px/20px 40px 60px 80px这样每个点会以斜线分隔，每个值按照顺序一一对应拼接，再按照左上右上右下坐下的顺序来设置圆角
边框阴影
box-shadow: h v [blur spread color inset]边框阴影与文本阴影的设置方法相差不大，下面对属性介绍：h水平位置距离v垂直位置距离blur模糊值spread阴影扩展，可放大或缩小阴影面积color设置阴影颜色inset设置内阴影
渐变
css3中增加了颜色渐变的效果，要注意因为渐变不是单一色，所以不能设置给
backgrond-color，要设置给background线性渐变，从一个方向往另一个方向产生渐变效果
形状参数有：
circle和ellipse。它们是以元素的正中心点来扩散渐变，但是circle适应的形状是正方形，ellipse会根据形状来自适应。一般这个参数很少写，不写默认会自动适应形状大小参数有：
closest-side扩散渐变到最近的边；farthest-side扩散渐变到最远的边；closest-corner扩散渐变到最近的角；farthest-corner扩散渐变的最远的角。默认值是最远的角，通过设置扩散渐变停止的位置，可以控制它的渐变范围坐标：
at x坐标 y坐标，设置坐标可以修改渐变的中心点，坐标值可以是数值也可以是方位词，只写一个方位词，那么另一个默认是center颜色：与线性渐变一样，可以写多个颜色和位置
to right从左往右渐变，也可以写90deg，效果一样to left从右往左渐变，也可以写270degto top从下往上渐变，也可以写0degto bottom从上往下渐变，也可以写180deg
background: linear-gradient(方向值，颜色1 位置，颜色2 位置，颜色3 位置....)方向值有4中写法：
颜色如果不写位置，那么它默认第一个是开始颜色，第二个是结束颜色。写位置用百分比就行。如果出现两个颜色位置相同，那么这两个颜色就没有渐变效果，直接跳转
径向渐变，以一个中心点往四周扩散渐变
background:radial-gradient(形状 大小 坐标，颜色)
重复渐变
如果你有渐变样式是重复多次渐变颜色，那么可以用到重复渐变，只需要写一次渐变色，它会自动重复只写到结束为止(100%)，语法不变
repeating-linear-gradient()重复线性渐变repeating-radial-gradient()重复径向渐变
背景样式设置
background-repeat背景平铺属性介绍：repeat自动平铺，repeat-x横向平铺，repeat-y纵向平铺no-repeat不平铺round自动缩小图片再平铺，实现正好铺满效果space自动为图片添加相等的间距，实现正好铺满效果
background-attachment背景滚动方式属性介绍：fixed背景不会跟随页面滚动scroll当元素没有滚动条的时候，它作用是背景跟随页面滚动；当元素有滚动条的时候，它作用是不跟随元素内容一起滚动local当元素有滚动条的时候，跟随元素内容一起滚动
background-size背景图片大小设置属性介绍：auto不作任何操作，让图片保持原大小number设置实际数值尺寸，让图片改变大小，注意如果图片比背景区域小或者与图片不是同比例，直接设置会造成图片失真变形percentage设置百分比，可以是0%-100%之间任何值，但是只有块级元素的背景可以用百分比设置。同时百分比计算的依据是其所属元素的宽度值cover将图片等比例缩放，自适应铺满整个容器，这样设置有可能出现图片溢出的情况。其实就图片高度自适应与盒子高度一样contain与cover刚好相反，也是等比例缩放图片，但是它是让容器完全包含整张图片，所以这样设置有可能出现空白区域。其实就是自适应图片宽度与盒子宽度一样当
background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放
background-origin:背景对齐方式属性介绍：border-box背景默认对齐边框左上角，会重叠边框padding-box背景默认对齐内边距左上角，会重叠内边距content-box背景默认对齐内容左上角，会重叠内容
background-clip背景裁切属性介绍：border-box背景显示边框及以内部分padding-box背景显示内边距及以内部分content-box背景显示内容部分background-clip与box-sizing和background-origin配合使用，可以实现一个a链接图片显示小，但点击触发范围大的效果
边框图片(难点)
border-image-source:url(...)设置边框背景图片border-image-slice:xx裁切图片，根据你设置的值来裁切背景图片为九宫格的形式，xx就是你设置的内偏移距离，也就是裁切距离只写一个值就代表四个方向都一样，如果每个方向想不同，那就按上右下左的顺序来写，它会分别根据设置的值来裁切。注意这个值是不带单位的
另外分成九份后，分别是左上角、右上角、右下角、左下角、顶侧栏、右侧栏、地侧栏、左侧栏、中间。默认情况下中间是不显示的，设置fill才能显示中间部分
注意裁切之后，除了中间部分，其它只会显示在边框以内，所以要么设置边框宽度，要么配合border-image-width属性，要么设置padding值才能看到
border-image-width:xxpx设置边框图片宽度，如果不设置这个属性，默认就是边框的宽度。但是要注意边框图片本质就是被背景图片，它不会影响内容显示，所以如果设置过宽就会与内容重叠。一般情况下建议这个属性的值与边框宽度相同border-image-outset:xxpx扩展边框宽度，这个属性一般不用，因为设置它会撑开盒子，影响整体布局border-image-repeat:stretch||repeat||round设置边框图片平铺的方式，注意九宫格四个角点是不会平铺的。stretch是默认值拉伸，repeat是直接平铺，round会自动缩放图片大小，再平铺达到完全铺满的效果连写方法：
border-image: source slice/width/outset repeat;
过渡效果
过渡效果实际上就是让样式变化时，以动画的方式来改变，它跟之前学的js动画函数其实是一个功能，是什么元素的样式要加上过渡效果，就写在该元素选择器内
transition-property:样式名你想让什么样式改变时以动画方式实现，就写对应的样式名transition-duration:xs变化时动画执行多长时间，以秒为单位transition-timing-function:linear||ease||规定动画的移动的方式linear匀速移动ease先慢后快结束时又变慢steps(x)固定动画一步一步的执行，参数是数值几步
transition-delay:xs过渡执行的延迟时间，以秒为单位简写方式：
transition:属性名 动画时间 移动方式 延迟时间如果有多个样式要实现过渡改变，用逗号分隔写多次。
最后，过渡效果只能产生某个值到另一个具体值的过渡，所以必须是带有具体数值的css样式改变才能用过渡，例如：display它的值是none和block，不是具体值所以用过渡无效。并且过渡默认是在触发事件结束后，自动还原样式值
作者：印象rcj
链接：https://www.jianshu.com/p/9177f4bee6b7
随时随地看视频
