函数
calc（）
linear-gradient()
radial-gradient()
steps()
hyphens: manual | none | auto
display:flex 弹性盒子
flex-direction: row | row-reverse | column | column-reverse 排列方式
justify-content: flex-start | flex-end | center | space-between | space-around 对其方式
box-sizing: content-box (默认) | border-box
将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
content-box，border和padding不计算入width之内
border-box，border和padding计算入width之内，其实就是怪异模式了~
transform 2d:
transform:translate( px, px) translate(%,%) translateX(n) translateY(n)
transform:rotate(deg) 绕纵向旋转
transform:scale(p*width,q*height) scaleX(n) scaleY(n)
transform:skew(deg,deg) 水平倾斜 ，垂直倾斜 skewX(angle) skewY(angle)
transform:martrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()
transform: matrix(a,b,c,d,e,f)
transform-origin( ) 默认 (50%, 50%,0) 即 （center,center ,0) | (bottom,left) | (px,%)
transform 3d
transform:translate3d( px, px,px) translate3d(%,%,%) translateX(n) translateY(n) translateZ(n)
transform:scale3d( px, px,px) scale3d(%,%,%) scaleX(n) scaleY(n) scaleZ(n)
transform:rotate3d( px, px,px) rotate3d(%,%,%) rotateX(n) rotateY(n) rotateZ(n)
transform-style: flat|preserve-3d; 嵌套元素是怎样在三维空间中呈现。
backface-visibility:visible | hidden; 定义元素在不面对屏幕时是否可见。
p
transition: width 1s linear 2s;
分开写：
transition-property: width; propertiy | all
transition-duration: 1s; 默认 0s
transition-timing-function: linear; 默认 ease | linear | ease-in | ease-out |ease-in-out | cubic-bezier(n,n,n,n); cubic-bezier可视化编辑: http://cubic-bezier.com/
transition-delay: 2s;
transition: width 2s, height 2s, transform 2s;
animation: myfirst 5s linear 2s infinite alternate;
分开写：
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear; 同 transition
animation-delay: 2s;
animation-iteration-count: infinite; 重复次数 默认 1
animation-direction: alternate; normal|reverse|alternate|alternate-reverse|initial|inherit; 正常 | 反向 | 来回 | 反向来回
animation-play-state: running; 默认 running | paused;
animation-fill-mode:forwards;
@keyframes myfirst{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@keyframes kfff{ from = 0% to = 100%
from {}
to {}
}
columns : column-width,column-count
column-count
column-width
column-gap
column-rule 列之间的宽度，样式和颜色。
column-rule-color
column-rule-style solid | dotted | dashed | double | outer ...
column-rule-width
border-radius, border-top-left-radius 。。。
background-image:url(),url() 可以多个背景图逗号分隔 相应的background-position,background-repeat
linear-gradient(direction, color1, color2,....)
linear-gradient(to top, color1, color2)
linear-gradient(to top left, color1, color2)
linear-gradient(color1, color2) 默认相当于 linear-gradient(to bottom, color1, color2) 或 linear-gradient(180deg, color1, color2)
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 透明度 过度 */
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 多个颜色
linear-gradient(red 10%, green 85%, blue 90%); /* 不均匀分布 */
background: repeating-linear-gradient(red, yellow 10%, green 10%); / * 重复 的渐变*/
background: radial-gradient(center, shape, size, start-color, ..., last-color);
background: radial-gradient(red, green, blue);
background: radial-gradient(60% 55%, farthest-side,circle,blue,green,yellow,black);
shape 默认值为 ellipse
text-shadow:h-shadow v-shadow blur color; -shadow
box-shadow:h-shadow v-shadow blur spread color; 适用于盒子 横向偏移 纵向 模糊半径 扩张半径 颜色
border-radius:50% 盒子
自定义字体
@font-face{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div { font-family : myFirstFont; }