前言

介绍了css3的新属性。

1.使用圆角radius时，一次设置多个是从（左上角开始顺时针旋转）；50%或者四个圆角值都设置为宽度或高度值的一半即可为圆形；单独设置一个位置如左上（可以boeder-top-left-radius:）。
box-shadow其中设置的值为：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset或省略)]；阴影的默认大小为为box的大小；（只设置一个可以设置阴影扩展半径为负数，或者后面的两个不设置，暂时不知道其他方法）。
linear-gradient第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示, 省略等同于180deg；deg的参数是一个坐标系中有个圆，从原点开始，y轴0deg按照顺时针到360deg。
text-shado文本阴影，X轴偏移量 Y轴偏移量模糊半径阴影颜色；color可以使用rgba色，没有inset值。（只有四个参数）
text-overflow文本溢出，clip剪切、ellipsis（…）；强制文本在一行内显示white-space:nowrap。
嵌入字体 @font-face
background-origin：border-box 边框 | padding-box 内边距（默认值） | content-box 内容区域；
background-clip：border-box 边框（默认值）| padding-box 内边距 | content-box 内容区域 | no-clip 不裁剪,与border-box效果相同。
选择器：
1. 根选择器 :root{}就等同于html{}，一般来说，推荐使用:root{}。
2. 否定选择器 :not ，排除选的除此之外的；选择器:not(selector) 。
3. 空选择器 :empty ，注意::empty 只对一点内容都没有的元素生效，哪怕有一个空格都不行。
4. 目标选择器 :target 超链接地址，与id对应。如：
  1
  2
  3
  4
  5
  6
  <style>
  .not_show{display: none;}
  #test:target{display:block;}
  </style>
  <h2><a href="#test">test</a></h2>
  <div class="not_show" id="test">这是一个测试</div>
5. 第一个与最后一个子元素 :first-child :last-child。（其中可在后接选择器，如：ul li:first-child a）
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)，（odd或者2n偶数、even或者2n+1奇数）；指定子元素索引：ul li:nth-child(5)；倒数第五个，ul li:nth-last-child(5)
7. 第一个与最后一个匹配类型的子元素 first-of-type，last-of-type；（如：div的第一个p不是第一个子元素:first-of-type）
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)；
9. 唯一子元素选择器 only-child匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素；
10. 唯一匹配类型的子元素 only-of-type；只有这一个同类型的标签；
表单选择器：
1. 可用选择器:enabled
2. 不可用选择器:disabled
3. 被选中选择器:checked
4. 被鼠标选中, 高亮选择器::selection（字要选中）
5. 只读选择器:read-only（readonly属性）
6. 非只读选择器:read-write
transform 变换/转换/改变
1. 变形-旋转 rotate() ，同样是沿着中心旋转；
2. 变形-扭曲 skew()其中skew(x,y)参数为,x轴和y轴,不写默认为0；skewX(x)X轴扭曲变形；skewY(y)Y轴扭曲变形
3. 变形-缩放 scale 如scele（1.5）
4. 变形-位移 translate一般译为翻译, 这里的意思是转变、偏移、位移；其实就是类似于position中的relative，不影响其他元素，如：translate(70px,100px)
5. 变形-矩阵 matrix()
6. 变形-原点transform-origin，元素变性为默认原点，可以改变元素的原点，然后再做变形

transition动画

函数有以下：

ease 默认值,速度由快到慢, 逐渐变慢

linear 恒速

ease-in 速度越来越快, 加速

ease-out 速度越来越慢, 减速

ease-in-out 先加速后减速, 渐显渐隐

/* 指定过渡或动态模拟的CSS属性 */
transition-property:all;

/* 过渡时间 */
transition-duration:.5s;

/* 过渡函数 */
transition-timing-function:ease;

/* 延迟执行时间 */
transition-delay: .2s;

/* 相当于 transition: all .5s ease .2s*/

关键帧keyframes

none 不改变默认行为, 表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 会在向元素应用动画样式时迅速应用动画的初始帧

both 元素动画同时具有forwards和backwards效果

/* 指定调用哪个动画? */
-webkit-animation-name:around;

/* 过渡时间 */
-webkit-animation-duration: 10s;

/* 过渡函数 */
-webkit-animation-timing-function: ease;

/* 延迟执行时间 */
-webkit-animation-delay: 1s;

/* 动画播放次数, infinite, 无限次播放, 或者填入数字 */
-webkit-animation-iteration-count:infinite;

/* 动画播放方向, 默认为normal, 即动画按顺序播放. */
/* 如果为alternate,则动画会在奇数次数（1、3、5 等等）正常播放，*/
/* 而在偶数次数（2、4、6 等等）反向播放 */
-webkit-animation-direction:normal;
-webkit-animation-direction:alternate;

/* 暂停 */
-webkit-animation-play-state:paused;

/* 播放、从暂停的位置开始播放 */

-webkit-animation-play-state:running;

flex布局

在使用flex布局时，给子元素定了宽度后，使用列排列会导致子元素不会随着父元素的缩小而缩小；（使用最小宽度不能生效，使用百分比和最大宽度可以解决）；换行不影响，若内容超过可以使用最小宽度；

在使用弹力盒子时，一左一右div时，两个div的宽度，缩小时若右边的div再次使用flex，里面的宽度强行撑开div,使宽度远大于现在的父元素，左边的使用overflow: hidden，会导致直接消失。（解决不写直接给父元素写；或者两个都加；）

使用列排列后，在添加了align-item后，子元素居中会导致宽度不随着父元素变化；（只有不写可以解决，在每个子元素套父元素，取消这个属性，然后添加flex布局，横向排列；有点多此一举还不如不用；推荐宽度小固定时使用）

列排列的flex是在主轴上的分配比

基本知识点：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器属性

flex-direction: 决定主轴的方向（即项目的排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上；定义如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow: 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content:定义了项目在主轴上的对齐方式。（主轴）
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items: 定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性

order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
 
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3Dtransform变换

transform-style：flat(默认，二维效果)，preserve-3d(三维效果)。要写给父元素变成3D容器；

translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()

rotateX(angle) 是元素依照x轴旋转；rotateY(angle) 是元素依照y轴旋转；rotateZ(angle) 是元素依照z轴旋转。

perspective(length) 景深, 就是你在多远的地方观看。

多列布局 Columns：

 width: 500px;
    padding: 5px;
    border: 1px solid green;
    margin: 20px auto;

    /* 每列宽度, 默认auto */
    column-width: auto;

    /* 分成几列? */
    column-count: 4;

    /* 列间距 */
    column-gap: 3em;

    /* 列边框 */
    column-rule: 1px solid #08c;

/* 跨列设置, 默认是none, 不跨列. all, 跨列*/
    -webkit-column-span: all;

盒子模型

content-box 默认值, 定义宽和高, 以内容为标准 border-box , 定义宽和高, 以边框为标准 inherit, 继承父元素的盒子模型

媒体查询

/* 当屏幕小于或等于指定宽度，样式生效 */
@media (max-width:480px){
    .ads {display:none;}
    }

/* 当屏幕大于或等于指定宽度，样式生效 */
@media (min-width:900px){
    .wrapper{width: 980px;}
    }

vertical-align

只显示三行

// 只显示三行
max-height: 65px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;