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从右往左渐变，也可以写270deg

  • to top从下往上渐变，也可以写0deg

  • to 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