css3


函數

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; }

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,657評論 0 7
  • 選擇器 CSS3中新添加了很多選擇器,解決了很多之前需要用javascript才能解決的布局問題。· elemen...
    lovelydong閱讀 494評論 0 2
  • 剛學習了這個案例,然后覺得比較好玩,就練習了一下。然后發現其實也不難,如果你經常使用PS或者Flash的話,應該就...
    aymincoder閱讀 536評論 0 3
  • 邊框box-shadow 也可以在偽元素中添加box-shadow效果: border-image border-...
    進擊的阿群閱讀 452評論 0 1
  • 和小家伙生活久了。 不時被他的童言趣語搞的苦笑不得。 特此記錄。
    小滿李閱讀 132評論 0 0