函數(shù)
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"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
content-box，border和padding不計算入width之內(nèi)
border-box，border和padding計算入width之內(nèi)，其實就是怪異模式了~
transform ?2d:
transform:translate( px, px)? ? ? translate(%,%)? ? ? ? ? ? ? ? translateX(n) ? ? translateY(n)
transform:rotate(deg)? ? 繞縱向旋轉(zhuǎn)?
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;? ? ? ? ? ? 嵌套元素是怎樣在三維空間中呈現(xiàn)。
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; ? ? ? ? ? ? ? ? ? ? 重復次數(shù) ?默認 ?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; }
