常用-webkit前綴屬性合集

-webkit-appearance:none

-webkit-perspective: none | 

1.3 -webkit-transform

設(shè)置或檢索對象的轉(zhuǎn)換

語法：

(2D)-webkit-transform: none | matrix(,,,,,)? translate([,])? translateX()? translateY()? rotate()? scale([,])? scaleX()? scaleY()? skew([,])? skewX() | skewY()?

(3D)-webkit-transform: matrix3d(,,,,,,,,)? translate3d(,,)? translateZ()? rotate3d(,,,)? scale3d(,,)? scaleZ()? perspective()?

1.4 -webkit-transform-origin

設(shè)置或檢索對象以某個原點進行轉(zhuǎn)換。該屬性提供3個參數(shù)值，默認值為50% 50% 0；提供2個參數(shù)值，默認為50% 50%。如果提供3個，第一個用于橫坐標，第二個用于縱坐標，第三個用于z軸。如果提供3個，第一個用于橫坐標，第二個用于縱坐標，z軸默認為0。如果只提供一個，該值將用于橫坐標；縱坐標默認為50%，z軸默認為0。

該屬性是-webkit-transform-origin-x、-webkit-transform-origin-y和-webkit-transform-origin-z的簡寫形式。

語法：

-webkit-transform-origin: [  |  | left | center | right | top | bottom] | [ [  |  | left | center① | right ] && [  |  | top | center② | bottom ] ] ?

percentage 用百分比指定坐標值?？梢詾樨撝怠?length 用長度值指定坐標值?？梢詾樨撝怠?left 指定原點的橫坐標為left，相當于0。 center① 指定原點的橫坐標為center，相當于元素寬度的50%。 right 指定原點的橫坐標為right，相當于元素寬度的100%。 top 指定原點的縱坐標為top，相當于0。 center② 指定原點的縱坐標為center，相當于元素高度的50%。 bottom 指定原點的縱坐標為bottom，相當于元素高度的100%。

1.5 -webkit-transform-style

設(shè)置子元素如何在3D空間相對其父元素渲染。該屬性聲明在父元素上，僅在其子元素運用了transform才有效。

語法：

-webkit-transform-style: flat | preserve-3d

flat 子元素運用transform時不保留其3D位置。 preserve-3d 子元素運用transform時保留其3D位置。

1.6 -webkit-transform-delay

檢索或設(shè)置對象延遲過渡的時間。接受多個時間，用,隔開。默認0s。 若存在多個延遲時間，每個延遲時間將運用到對應(yīng)的transition-property的屬性上。若持續(xù)時間個數(shù)少于transition-property個數(shù)，則由0s填補缺少的延遲時間；若延遲時間個數(shù)多于transition-property個數(shù)，則取對應(yīng)數(shù)量的延遲時間。

語法：

-webkit-transition-delay: [ , ]*

time 指定對象過渡的延遲時間。若為負值，過渡將立即執(zhí)行，但過渡將從過渡周期某處開始。

1.7 -webkit-transition-duration

指定對象過渡的持續(xù)時間。接受多個時間，用,隔開。默認值為0s。 若存在多個持續(xù)時間，每個持續(xù)時間將運用到對應(yīng)的transition-property的屬性上。若持續(xù)時間個數(shù)少于transition-property個數(shù)，則重復(fù)持續(xù)時間列表；若持續(xù)時間個數(shù)多于transition-property個數(shù)，則取對應(yīng)數(shù)量的持續(xù)時間。

-webkit-transition-duration: [ , ]*

time 指定對象過渡的時間，不接受負值。

1.8 -webkit-transition-property

檢索或設(shè)置對象中的參與過渡的屬性。接受多個屬性，用,隔開。默認值為all。

語法：

-webkit-transition-property: all | none | [ , ]*

all 所有能動畫的CSS屬性 none 不指定過渡的CSS屬性 指定要過渡的CSS屬性

1.9 -webkit-transition-timing-function

檢索或設(shè)置對象中過渡的時間函數(shù)。接受多個時間函數(shù)，用,隔開。默認值為ease。 如果存在多個時間函數(shù)，每個時間函數(shù)將運用到對應(yīng)的transition-property的屬性上。若時間函數(shù)個數(shù)少于transition-property個數(shù)，則由ease填補缺少的時間函數(shù)；若時間函數(shù)個數(shù)多于transition-property個數(shù)，則取對應(yīng)數(shù)量的時間函數(shù)。

語法：

-webkit-transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) ]*

linear 線性過渡。等同于cubic-bezier(0.0, 0.0, 1.0, 1.0)。 ease 平滑過渡。等同于cubic-bezier(0.25, 0.1, 0.25, 1.0)。 ease-in 由慢到快。等同于cubic-bezier(0.42, 0, 1.0, 1.0)。 ease-out 由快到慢。等同于cubic-bezier(0, 0, 0.58, 1.0)。 ease-in-out 由慢到快再到慢。等同于cubic-bezier(0.42, 0, 0.58, 1.0)。 cubic-bezier(x1, y1, x2, y2) 自定義時間函數(shù)，x1、x2必須在[0, 1]區(qū)間內(nèi)，y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。

1.10 -webkit-backface-visibility

決定元素背面在面向用戶時是否可見。

語法：

-webkit-backface-visibility: visible | hidden

visible 默認值。背面內(nèi)容可見，顯示正面內(nèi)容的鏡像。 hidden 背面內(nèi)容不可見。

1.11 -webkit-animation

設(shè)置動畫效果。接受多組值，用,隔開。默認值為none 0s ease 0s 1 normal none running。 該屬性是-webkit-animation-name、-webkit-animation-duration、-webkit-animation-timing-function、-webkit-animation-delay、-webkit-animation-iteration-count、-webkit-animation-direction、-webkit-animation-fill-mode和-webkit-animation-play-state的簡寫形式。

語法：

-webkit-animation:  ||  ||  ||  ||  ||  ||  || 

single-animation-name 指定對象引用的動畫名稱。 single-animation-duration 指定對象動畫的持續(xù)時間。 single-animation-timing-function 檢索或設(shè)置對象動畫的時間函數(shù)。 single-animation-delay 指定對象動畫延遲的時間。 single-animation-iteration-count 指定對象動畫的循環(huán)次數(shù)。 single-animation-direction 檢索或設(shè)置對象動畫在循環(huán)中是否反向運動。 single-animation-fill-mode 檢索或設(shè)置對象動畫時間之外的狀態(tài)。 single-animation-play-state 檢索或設(shè)置對象動畫的狀態(tài)。

1.12 -webkit-animation-delay

設(shè)置動畫延遲時間。默認值為0s。

語法：

-webkit-animation-delay:  [, ]*

single-animation-delay 指定對象動畫的持續(xù)時間。若為負值，動畫將立即執(zhí)行，但動畫將從動畫周期某處開始。

1.13 -webkit-animation-direction

檢索或設(shè)置對象執(zhí)行動畫的運動方向。默認值為normal。

語法：

-webkit-animation-direction: normal | alternate | alternate-reverse | reverse

normal 指定對象的動畫正向執(zhí)行。 alternate 指定對象的動畫在奇數(shù)次動畫周期正向執(zhí)行、偶數(shù)次動畫周期反向執(zhí)行。動畫在反向執(zhí)行時，其對應(yīng)的時間函數(shù)也相應(yīng)反向。奇偶取決于開始時是奇數(shù)還是偶數(shù)。 alternate-reverse 與alternate相反，指定對象的動畫在奇數(shù)次動畫周期反向執(zhí)行、偶數(shù)次動畫周期正向執(zhí)行。奇偶取決于開始時是奇數(shù)還是偶數(shù)。 reverse 指定對象的動畫反向執(zhí)行。

1.14 -webkit-animation-duration

檢索或設(shè)置對象動畫的持續(xù)時間。默認值為0s。

語法：

-webkit-animation-duration:  [, ]*

single-animation-duration 指定對象動畫的持續(xù)時間。瀏覽器將忽略負值對應(yīng)的聲明。

1.15 -webkit-animation-fill-mode

檢索或設(shè)置對象動畫時間之外的狀態(tài)。默認值為none。

-webkit-animation-fill-mode: none | forwards | backwards | both

none 默認值。動畫幀不會運用到對象非動畫周期中。 forwards 設(shè)置對象狀態(tài)為動畫結(jié)束幀（用于對象的最后一幀）。若動畫執(zhí)行次數(shù)為0，則狀態(tài)為第一次的動畫首幀。結(jié)束幀與執(zhí)行次數(shù)和運動方向有關(guān)。 backwards 設(shè)置對象狀態(tài)為動畫首幀（用于對象的第一幀），并在延遲時間周期內(nèi)保持該狀態(tài)。首幀與運動方向有關(guān)。 both 設(shè)置對象狀態(tài)為動畫首幀和結(jié)束幀。

1.16 -webkit-animation-iteration-count

指定對象動畫的執(zhí)行次數(shù)。默認值為1。

語法：

-webkit-animation-iteration-count: infinite |  [, ]*

infinite 指定對象動畫無限循環(huán)。 single-animation-iteration-count 指定對象動畫的執(zhí)行次數(shù)。接受非負數(shù)，如1.5，則將執(zhí)行1.5個動畫周期。

1.17 -webkit-animation-name

檢索或設(shè)置對象所應(yīng)用的動畫名稱列表，必須與規(guī)則@keyframes配合使用，動畫名稱由@keyframes定義。默認值為none

語法：

-webkit-animation-name: none |  [, ]*

none 元素不引用任何動畫名稱或禁用元素已有動畫。 single-animation-name 引用動畫的名稱。

1.18 -webkit-animation-play-state

檢索或設(shè)置對象動畫的狀態(tài)。默認值為running。

語法：

-webkit-animation-play-state: running | paused

running 動畫運動中。 paused 動畫暫停。

1.19 -webkit-animation-timing-function

檢索或設(shè)置對象動畫的時間函數(shù)。默認值為ease。

語法：

-webkit-animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2) | steps(, ) | step-start | step-end

linear 線性過渡；等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)。 ease 默認值。平滑過渡；等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)。 ease-in 由慢到快；等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)。 ease-out 由快到慢；等同于貝塞爾曲線(0, 0, 0.58, 1.0)。 ease-in-out 由慢到快再到慢；等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)。 cubic-bezier(x1, y1, x2, y2) 自定義時間函數(shù)，x1、x2必須在[0, 1]區(qū)間內(nèi)，y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。 steps(, ) 階躍時間函數(shù)，第一個參數(shù)設(shè)定時間函數(shù)中的間隔次數(shù)，必須是正整數(shù)；第二個可選，設(shè)定動畫在間隔的開始還是結(jié)束發(fā)生階躍變化，接受start或end關(guān)鍵字，默認為end。Chr8+、Saf5.1+、Android 4.0+、iOS 5.0+。 step-start 相當于steps(1, start)。 step-end 相當于steps(1, end)。

1.20 -webkit-box-shadow

設(shè)置或檢索對象陰影。 可以設(shè)定多組效果，每組參數(shù)值以逗號分隔。 對應(yīng)的腳本特性為boxShadow。

語法：

-webkit-box-shadow:none | ① ② ③ ④  inset

none 無陰影 ① 第1個長度值用來設(shè)置對象的陰影水平偏移值。可以為負值 ② 第2個長度值用來設(shè)置對象的陰影垂直偏移值?？梢詾樨撝?③ 如果提供了第3個長度值則用來設(shè)置對象的陰影模糊值。不允許負值 ④ 如果提供了第4個長度值則用來設(shè)置對象的陰影外延值?？梢詾樨撝? 設(shè)置對象的陰影的顏色。 inset 設(shè)置對象的陰影類型為內(nèi)陰影。該值為空時，則對象的陰影類型為外陰影

1.21 -webkit-box-sizing

設(shè)置或檢索對象的盒模型組成模式。 對應(yīng)的腳本特性為boxSizing。

語法：

-webkit-box-sizing:content-box | border-box

content-box padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding )。此屬性表現(xiàn)為標準模式下的盒模型。此值為默認值 border-box padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )。此屬性表現(xiàn)為怪異模式下的盒模型。

1.22 -webkit-border-image

設(shè)置或檢索對象的邊框樣式并且用圖像來進行填充。border-image屬性可以用圖像替代border-style樣式。當值為none時，將顯示border-style樣式。

語法：

-webkit-border-image: | [ |  | ]* | 

設(shè)置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。 設(shè)置或檢索對象的邊框背景圖的分割方式。 設(shè)置或檢索對象的邊框厚度。 設(shè)置或檢索對象的邊框背景圖的擴展。 設(shè)置或檢索對象的邊框背景圖的擴展。

1.23 -webkit-border-radius

設(shè)置或檢索對象使用圓角邊框。每一個角的弧線形狀可以通過分別控制水平圓的半徑和垂直圓的半徑來定義。圓角是應(yīng)用在整個背景上。即使元素沒有邊框，圓角剪切的位置也將根據(jù)背景剪切的值來定義。border-radius的屬性值的縮寫方式是：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius。

語法：

webkit-border-radius:[ | ]{1,4} [ | ]{1,4}

用長度值設(shè)置對象的圓角半徑長度。不允許負值。 用百分比設(shè)置對象的圓角半徑長度。不允許負值。對于水平半徑，此值為占邊框方框?qū)挾鹊陌俜直?。對于垂直半徑，此值為占邊框方框高度的百分比?br>

1.24 -webkit-padding-start

-webkit-padding-start指定給元素進行內(nèi)填充。元素的文本方向?qū)傩詻Q定填充的方向。如果文本方向從左到右(ltr)，則在元素左邊設(shè)置填充；否則它在元素右邊設(shè)置填充。

語法：

-webkit-padding-start:  | 

定義一個寬度 定義一個百分比

1.25 -webkit-text-size-adjust

用于移動端中瀏覽器的頁面文本大小調(diào)整。

語法：

-webkit-text-size-adjust: none | auto | 

none 字體大小不會自動調(diào)整。 auto 默認值，字體大小會根據(jù)設(shè)備/瀏覽器來自動調(diào)整。 字體顯示的大小。

1.26 -webkit-security

指定要使用的形狀來 代替文字的顯示。常用于input[type="password"]。

語法：

-webkit-text-security: none | circle | disc | square

none 無。 circle 圓圈。 disc 圓形。 square 正方形。

1.27 -webkit-tap-highlight-color

改寫iOS Safari中可點擊元素的高亮顏色。該屬性可以只設(shè)置透明度。如果未設(shè)置透明度，iOS Safari使用默認的透明度。當透明度設(shè)為0，則會禁用此屬性；當透明度設(shè)為1，元素在點擊時不可見。除了iOS Safari，大部分android手機也是支持的，只是顯示效果有所不同。

語法：

-webkit-tap-highlight-color: color | transparent

color 顏色。 transparent 透明。常用于android平臺。

1.28 -webkit-writing-mode

設(shè)置或檢索對象的內(nèi)容塊固有的書寫方向。

語法：

-webkit-writing-mode: horizontal-tb | vertical-rl | vertical-lr

horizontal-tb 默認值。水平方向從左向右、垂直方向自上而下的書寫方式。即left-right-top-bottom（類似IE私有值lr-tb）。后一行位于前一行的下方。 vertical-rl 垂直方向自上而下、水平方向從右向左的書寫方式。即top-bottom-right-left（類似IE私有值tb-rl）。后一列位于前一列的右邊。 vertical-lr 垂直方向自上而下、水平方向從左向右的書寫方式。即top-bottom-left-right。后一列位于前一列的左邊。

1.29 -webkit-touch-callout

當你觸摸并按住觸摸目標時候，禁止或顯示系統(tǒng)默認菜單。 -webkit-touch-callout 是一個 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。 在iOS上，當你觸摸并按住觸摸的目標，比如一個鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認菜單。這個屬性可以讓你禁用系統(tǒng)默認菜單。

語法：

-webkit-touch-callout：none | default

none：系統(tǒng)默認菜單被禁用 default：系統(tǒng)默認菜單不被禁用

1.30 -webkit-filter

CSS濾鏡屬性，可以在元素呈現(xiàn)之前，為元素的渲染提供一些效果，如模糊、顏色轉(zhuǎn)移之類的。濾鏡常用于調(diào)整圖像、背景、邊框的渲染。

CSS標準里包含了一些已實現(xiàn)預(yù)設(shè)效果的函數(shù)。你也可以將設(shè)定了濾鏡效果的SVG文件，通過URL屬性引用給SVG濾鏡元素（ SVG filter element）.

語法：

-webkit-filter:none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | saturate() | sepia() | drop-shadow( radius )| url()

none 無SVG濾鏡效果。 blur(<number>px) 設(shè)置對象的模糊效果。 brightness(<percentage>) 設(shè)置對象的亮度。除了百分比外，也可以用非負數(shù)表達。 contrast(<percentage>) 設(shè)置對象的對比度。除了百分比外，也可以用0-1的數(shù)字表達。 grayscale(<percentage>) 設(shè)置對象的灰度。除了百分比外，也可以用0-1的數(shù)字表達。 hue-rotate(<number>deg) 設(shè)置對象的色相旋轉(zhuǎn)。用0-360數(shù)字表達。 invert(<percentage>) 設(shè)置對象的反色。除了百分比外，也可以用0-1的數(shù)字表達。 opacity(<percentage>) 設(shè)置對象的透明度。除了百分比外，也可以用0-1的數(shù)字表達。 saturate(<percentage>) 設(shè)置對象的飽和度。除了百分比外，也可以用非負數(shù)表達。 sepia(<percentage>) 設(shè)置對象的褐色程度。除了百分比外，也可以用0-1的數(shù)字表達。 drop-shadow(<length①> <length②> radius <color>) 設(shè)置對象的陰影。第一個長度是向右偏移距離，第二個長度是向下偏移距離，皆可為負值，皆為必傳參數(shù)；第三個是陰影圓角，可選；第四個是陰影顏色，可選。 url(path.svg#a) 設(shè)置對象濾鏡效果。通過SVG可實現(xiàn)以上所有效果。SVG可寫在頁面里，也可外部引用?？稍黾渝^節(jié)點。