1. border-radius的四个值分别代表：左上 右上 右下 左下
2. border-top-left-radius:左上角的圆角
3. border-top-rigth-radius:右上角的圆角
4. border-radius:1 2 3 4(左上X 右上X 右下X 右上X)/1 2 3 4(左上Y 右上Y 右下Y 右上Y)

5. box-shadow的值分别代表：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色][投影方式]
6. 阴影模糊半径：不能取负值，值越大模糊的棱角不清
7. 阴影扩展半径：负值是缩，1是不大不小，值越大阴影越大
8. 投影方式：inset向左上投影
9. 同一盒子，可以同时加多个阴影，阴影之间用“，”隔开

.box_shadow{
 box-shadow:4px 2px 6px #f00,-4px -2px 6px #000,0px 0px 12px 5px #33cc00 insert;
}

1. text-shadow；X-Offset Y-Offset Blur color
2. X-Offset:表示阴影的水平偏移距离，其值为正值是阴影向右偏移，反之向左偏移
3. Y-Offset:表示阴影的垂直偏移距离，正值时向下偏移，反之向上
4. Blur：是指阴影的模糊程度，不能是负值，值越大阴影越模糊，反之越清晰，0是没有阴影模糊

1. RGB是由红绿蓝的变化以及相互叠加得到各式各样的颜色
2. RGBA是在RGB的基础上增加了控制alpha透明度的参数
3. RGB的取值范围0-255；0%~100.0% ，超出范围的数值会被截取至最近的有效取值
4. A的取值在0~1之间，不能为负

5. 线性渐变：linear-to
6. linear-gradient([direction],color[percent],color[percent]…)
   direction角度的单位为‘deg’,也可以用to bottom,to left,to top left等方式
7. 径向渐变：radial-at
8. radial-gradient(shape at position,color[percent],color[percent]…)
   shape:放射的形状，圆形circle,椭圆ellipse,
   position圆心位置：可以是两个值，如果为一个值第二个值是默认值center（即50%）

9. word-wrap:normal | break-word

10. border-image:url(xxx.png) number
11. stretch:拉伸，有多长拉伸多长
12. repeat:和4角上同等大小的图片进行平铺，当框中区域长度不是四角图片大小的整数倍时会被切割
13. round:4角上的图片进行拉伸平铺不会被切割
14. number为截取指定图片四周的宽度作为border的背景填充

15. border-box:从border区域开始引入
16. padding-box：默认
17. content-box

18. border-box:默认
19. padding-box
20. content-box
21. no-clip

22. contain

23. center

24. 属性选择器
    伪类的效果可以通过添加一个实际的类来达到
    伪元素的效果则需要通过添加一个实际的元素来达到

25. E[att ^=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值是以val开头的任何字符串

26. E[att $=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值是以val结尾的任何字符串

27. E[att *=“val”]{}选择匹配元素E,且E元素定义了属性att，其属性值任意位置出现了“val”,即属性值包含了“val”,位置不限

input[age*='18']{
   color:#000;
}

1. 伪元素选择器：当前标签里面的东西

2. ：after

3. ：before

4. 选中文档里面的内容

5. ：first-letter

6. ：first-line

7. ：selection
   用来匹配突出显示的文本（用鼠标选择文本的时候），浏览器默认情况下，用鼠标选择网页文本是“l蓝色的背景，白色的字体”
   user-select:none 不让用户选中

8. 伪类选择器

9. ;root根标签选择器等同于

10. ：not否定选择器

除了class为deno的div以外

div:not([class='demo']){
  color:red;
}

11. ：empty空标签选择器
    用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是没有一点内容，哪怕是一个空格

12. target目标元素选择器
    用来匹配被location.hash选中的元素（即锚点元素），选择器可用来选取当前活动的目标元素

13. ：first-child某个元素下的第一个子元素

14. ：last-child最后一个子元素

15. ：nth-child(){}第xx个子元素，n代表变量自然数
    even/2n偶数 odd/2n+1奇数

16. ：nth-last-child(){}从后往前数
    限制了类型，即所在修饰元素的类型下选择特定位置的元素

17. :first-of-type第一个子元素

18. ：last-of-type最后一个子元素

19. ：nth-of-type

20. ：nth-last-of-type(){}从后往前数
    有些表单元素有enable和disable的状态，比如输入框、密码框、复选框等

21. ：enable可用的元素

22. ：disable不可用的元素

23. ：checked选择框的选中状态
    checkbox,radio的一些默认状态不可用属性进行改变，如边框颜色

24. ：read-only选中只读的元素

<input type ='text' readonly='readonly'/>

25. ：read-write选中非只读的元素
26. 条件选择器
    E>F直接子元素（只能找儿子不能找孙子）
    E+F后面紧挨着的兄弟节点
    E~F后面的兄弟节点

27. transform可以实现元素的形状、角度、位置等的变化
28. rotate()以XYZ为轴进行旋转，默认为Z
29. rotateX()，rotateY()，rotateZ(),rotate3d（X,Y,Z,angle）
30. scale()以X/Y轴进行缩放
31. scale(x,y)接收两个参数，如果第二个未提供，则第二个参数使用第一个参数
32. scalex(),scaley(),scalez()值是数字表示倍数，不加任何单位
33. scale3d()->scale3d(sx,sy,sz)
34. skew()对元素进行倾斜扭曲
35. skew(x,y)接收两个值，第一个值对应X轴，第二个参数对应Y轴，如果第二个参数未提供，则默认值为0
36. translate()可以移动距离相对于自身位置
37. translatex（）translatey（）translatez（）translate3d（x,y,z）
38. transform-origin:关键字（left top）| 百分比 | 像素值
    变换原点，任何一个元素都有一个中心点，中心点是居中于元素x轴和y轴50%处

transition属性是css3的一个符合属性，包括以下子属性

1. transition-property指定过渡或动态模拟的css属性
2. transition-duration指定过渡所需要的时间
3. transition-timing-function指定过渡函数

4. transtion-delay指定开始出现的延迟时间(ms/s)

@keyframes动画关键帧
animation会按照keyframes关键帧里面指定的帧状态而过渡执行，0%-100%代表动画的时间过渡
5.animation-name 规定需要绑定到选择器的 keyframe 名称
5. animation-duration 规定完成动画所花费的时间，以秒或毫秒计
6. animation-timing-function 规定动画的速度曲线

8. animation-delay 规定在动画开始之前的延迟。
9. animation-iteration-count 规定动画应该播放的次数
n(播放n次)
infinite（无限次）
10. animation-direction 规定是否应该轮流反向播放动画。
normal(默认值，动画按正常播放)
reverse(动画反向播放)
alternate(动画在奇数次正向播放，在偶数次反向播放)
alternate-reverse(动画在奇数次反向播放，在偶数次正向播放)

div{
position:absolute;
left:0px;
top:30px;
width:100px;
heigth:100px;
background:red;
opacity:0;
animation:move 5s linear;
}
@keyframes move{
0%{
left:200px;
}
100%{
left:300px;
}
}

父元素上设置

1. columns:[columns-width][columns-count]
2. columns-width:指每一列的宽度，根据容器宽度自适应（最小宽度）
3. columns-count:指规定的列数 唯一精确的是列数
4. columns–gap属性规定列之间的间隔。
   
5. columns-rule不占任何空间位置，在列与列之间改变其宽度不会改变任何的位置
   

flex为复合属性，且必须配合父元素display:flex使用
部分css属性在flexbox盒子里面不起作用：float,clear,column,vertical-align
以下6个属性设置在子元素上

6. flex-grow放大比例
   把剩余区域按照flex-grow的比例平均分配
7. flex-shrink缩小比例
   多出盒子的部分，按照比例大小砍掉相应的大小，默认值是1
8. flex-basis伸缩基准值，项目占据主轴的空间（超出后按比例计算）
   如果元素上同时出现了width和flex-basis那么flex-basis会覆盖width的值
9. flex:是flex-grow,flex-shrink,flex-basis的简写
10. order项目的排列顺序，从小到大进行排列
11. align-self单个项目对齐方式，可以覆盖align-items属性。默认值是auto,表示继承父元素的align-items属性，如果没有父元素则等同于stretch
    align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
    一下6个属性设置在容器上

12.flex-direction决定主轴的反向

12. flex-wrap是否换行

13. flex-flow是flex-direction和flex-wrap的简写
14. justify-content项目在主轴上的对齐方式

15. align-items在侧轴上如何对齐

16. align-content多根轴线的对齐方式

模拟移动端
17. <meta name ="vieport" content ="width=device-width,initial-scal=1.0">
width=device-width适口宽度=设备的宽
initial-scal=1.0视觉效果
use-scaleble =no是否允许用户进行缩放
minimum-scal最小缩放
maximun-scal最大缩放
媒体查询

18. <link rel="stylesheet" media ="screen and (max-width:800px)" href =""xxx.css>
19. @media(max-width:60px){div{}}
20. @media screen and(max-width:800px) and (min-width:600px){...}