CSS3的新特性整理

animation    IE10

animation的六大屬性

animation-name規定需要綁定選擇器的keyframe名稱

animation-duration規定完成動畫所花費的時間 s ms
object.style.animationDuration="3s"

animation-timing-function動畫的速度曲線
默認值ease
object.style.animationTimingFunction="linear"
語法 animation-timing-function:value

animation-timing-function使用名為三次Cubic Bezier貝塞爾曲線函數的數學函數，來生成速度曲線 可以使用自己的值也可
以預定義的值

值:linear從始到末以相同的速度
ease 默認 從低速 加快在結束前變慢
ease-in動畫低速開始
ease-out動畫低速結束
ease-in-out動畫從低速開始和結束
cubic-bezier(n,n,n,n)在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值

animation-deplay動畫開始之前的延遲
animation-delay: time;
JavaScript 語法：object.style.animationDelay="2s"
animation-delay 值以秒或毫秒計。
允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫

 

animation-iteration-count動畫播放的次數 IE10
animation-iteration-count: n|infinite
JavaScript 語法： object.style.animationIterationCount=3

 

animation-direction是否應該輪流反向播放動畫
animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等
）向后播放
animation-direction: normal|alternate;
JavaScript 語法： object.style.animationDirection="alternate"

默認值 none 0 ease 0 1 normal
javascript的語法 object.style.animation="mymove 5s infinite"

Transition   過渡的四大屬性 IE10

transition-property
transiont-property屬性規定過渡css屬性的名稱
transition-property: none|all|propertyCSS 屬性名稱列表，列表以逗號分隔;
JavaScript 語法： object.style.transitionProperty="width,height"

transition-duration 完成過渡效果需要多少秒或毫秒
transition-duration: time;
JavaScript 語法： object.style.transitionDuration="5s"

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
JavaScript 語法： object.style.transitionTimingFunction="linear"

transition-delay
JavaScript 語法： object.style.transitionDelay="2s"
transition-delay: time;

默認值 all 0 ease 0
transition:property duration timing-function delay
javascript語法：object.style.transition="width 2s"

 

 

transform IE10
transform 允許我們對元素進行旋轉、縮放、移動、或傾斜
默認none
javascript的語法 object.style.transform="rotate(7deg)"
transform: none|transform-functions;

none 不進行轉換
matrix(n,n,n,n,n,n)使用六個值的矩陣
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)使用 16 個值的 4x4 矩陣
translate(x,y)2D 轉換
translate3d(x,y,z)3D 轉換
translateX(x)只是用 X 軸的值
translateY(y)只是用Y軸的值
translateZ(z)只是用Z軸的值
scale(x,y)2D縮放
scale3d(x,y,z)3D縮放
scaleX(x),scaleY(y),scaleZ(z)
rotate(angle) 2D 旋轉，在參數中規定角度
rotate3d(x,y,z,angle)3D 旋轉
rotateX(angle),rotateY(angle),rotateZ(angle)
skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換
skewX(angle) skewY(angle) perspective(n)

 

新增的css3的選擇器

E:nth-last-child(n) 
E:nth-of-type(n) 
E:nth-last-of-type(n) 
E:last-child 
E:first-of-type 
E:only-child 
E:only-of-type 
E:empty 
E:checked 
E:enabled 
E:disabled 
E::selection 
E:not(s)
E::not(.s)
body: nth-child(even), nth-child(odd)/*：此處他們分別代表了表格（tbody）下面的偶數行和奇數行（tr）*/等等......

 

@Font-face 特性
Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體

Font-face 客戶端字體案例
<p><font face="arial">arial courier verdana</font></p>

Font-face 服務端字體案例

@font-face { 
font-family: BorderWeb; 
src:url(BORDERW0.eot); 
} 
@font-face { 
font-family: Runic; 
src:url(RUNICMT0.eot); 
}

.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

 

Word-wrap

設置或檢索當當前行超過指定容器的邊界時是否斷開轉行，文字此時已被打散

Text-overflow它與 word-wrap 是協同工作
word-wrap 設置或檢索當當前行超過指定容器的邊界時是否斷開轉行，而 text-overflow 則設置或檢索當當前行超過指定容
器的邊界時如何顯示

.clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
width:200px;background:#ccc;} 
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
width:200px; background:#ccc;}

<div class="clip"> 不顯示省略標記，而是簡單的裁切條</div>

<div class="ellipsis"> 當對象內文本溢出時顯示省略標記</div>

 

文本渲染

div { 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
}

Text-fill-color: 文字內部填充顏色
Text-stroke-color: 文字邊界填充顏色
Text-stroke-width: 文字邊界寬度

文本渲染

div { 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
}

Text-fill-color: 文字內部填充顏色
Text-stroke-color: 文字邊界填充顏色
Text-stroke-width: 文字邊界寬度

gradient 漸變效果
線性漸變 linear左上（0% 0%）到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

徑向漸變radial從一個圓到一個圓的漸變
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

css3的陰影shadow和反射reflect

background-clip:border-box;背景從border開始顯示；
background-clip：padding-box
background-clip：content-box
background-clip:no-clip:no-clicp默認屬性等同於border-box

background-origin 用於確定背景的位置 通常與background-positon聯合使用

background-size來調整背景圖片的大小，注意別和 clip 弄混，這個主要用於設定圖片本身

background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小 .
background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸

 

background-break: continuous; 默認值。忽略盒之間的距離（也就是像元 素沒有分成多個盒子，依然是
一個整體一 樣）
background-break: bounding-box; 把盒之間的距離計算在內；
background-break: each-box; 為每個盒子單獨重繪背景

 

counter()=[counter(name) | counters(name,list-style-type)]{1,}

counter-reset IE8

counter-reset 屬性設置某個選擇器出現次數的計數器的值。默認為 0。
利用這個屬性，計數器可以設置或重置為任何值，可以是正值或負值。如果沒有提供 number，則默認為 0。
注釋：如果使用 "display: none"，則無法重置計數器。如果使用 "visibility: hidden"，則可以重置計數器

JavaScript 語法： object.style.counterReset="subsection"

counter-reset的值none id number inherit

 

attr()=attr(attr-name)插入元素的屬性值 IE8

calc() =calc(四則運算) 動態計算長度值 IE9
需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標准的數學運算優先級規則；

initial屬於css-wide關鍵字，這表示所有的屬性都可以接受該值 IE11

unset 擦除屬性聲明

顏色值
color color的顏色名稱，HEX，RGB，RGBA，HSL，HSLA，transparent,currentColor

currentColor

resolution分辨率值不允許有負值
頻率單位包括有： dpi, dpcm, dppx

角度值 angle角度值的正常范圍應在[0-360deg]內，例如：-10deg與350deg是等價的
角度單位包括有： deg, grad一個圓共400梯度, rad 一個圓共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

長度值與單位

ch 數字“0”的寬度 ie9

rem 相對長度單位。相對於根元素(即html元素)font-size計算值的倍數
vw相對於視口的寬度。視口被均分為100單位的vw ie9
vh 相對於視口的高度。視口被均分為100單位的vh
vmax 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin
q 1/4毫米（quarter-millimeters）。絕對長度單位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import@media@font-face@keyframes@supports

E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection

E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target

 

屬性選擇器
E[att^="val"]選擇具有att屬性且屬性值為以val開頭的字符串的E元素
E[att$="val"]選擇具有att屬性且屬性值為以val結尾的字符串的E元素
E[att*="val"]選擇具有att屬性且屬性值為包含val的字符串的E元素

E~F

CSS3 的盒子模型
盒子模型為開發者提供了一種非常靈活的布局方式，但是支持這一特性的瀏覽器並不多，目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox

未完待續....