常用-webkit前綴屬性合集

-webkit-appearance:none

-webkit-perspective: none | 

1.3 -webkit-transform

設(shè)置或檢索對(duì)象的轉(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è)置或檢索對(duì)象以某個(gè)原點(diǎn)進(jìn)行轉(zhuǎn)換。該屬性提供3個(gè)參數(shù)值，默認(rèn)值為50% 50% 0；提供2個(gè)參數(shù)值，默認(rèn)為50% 50%。如果提供3個(gè)，第一個(gè)用于橫坐標(biāo)，第二個(gè)用于縱坐標(biāo)，第三個(gè)用于z軸。如果提供3個(gè)，第一個(gè)用于橫坐標(biāo)，第二個(gè)用于縱坐標(biāo)，z軸默認(rèn)為0。如果只提供一個(gè)，該值將用于橫坐標(biāo)；縱坐標(biāo)默認(rèn)為50%，z軸默認(rèn)為0。

該屬性是-webkit-transform-origin-x、-webkit-transform-origin-y和-webkit-transform-origin-z的簡(jiǎn)寫形式。

語法：

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

percentage 用百分比指定坐標(biāo)值?？梢詾樨?fù)值。 length 用長(zhǎng)度值指定坐標(biāo)值?？梢詾樨?fù)值。 left 指定原點(diǎn)的橫坐標(biāo)為left，相當(dāng)于0。 center① 指定原點(diǎn)的橫坐標(biāo)為center，相當(dāng)于元素寬度的50%。 right 指定原點(diǎn)的橫坐標(biāo)為right，相當(dāng)于元素寬度的100%。 top 指定原點(diǎn)的縱坐標(biāo)為top，相當(dāng)于0。 center② 指定原點(diǎn)的縱坐標(biāo)為center，相當(dāng)于元素高度的50%。 bottom 指定原點(diǎn)的縱坐標(biāo)為bottom，相當(dāng)于元素高度的100%。

1.5 -webkit-transform-style

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

語法：

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

flat 子元素運(yùn)用transform時(shí)不保留其3D位置。 preserve-3d 子元素運(yùn)用transform時(shí)保留其3D位置。

1.6 -webkit-transform-delay

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

語法：

-webkit-transition-delay: [ , ]*

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

1.7 -webkit-transition-duration

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

-webkit-transition-duration: [ , ]*

time 指定對(duì)象過渡的時(shí)間，不接受負(fù)值。

1.8 -webkit-transition-property

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

語法：

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

all 所有能動(dòng)畫的CSS屬性 none 不指定過渡的CSS屬性 指定要過渡的CSS屬性

1.9 -webkit-transition-timing-function

檢索或設(shè)置對(duì)象中過渡的時(shí)間函數(shù)。接受多個(gè)時(shí)間函數(shù)，用,隔開。默認(rèn)值為ease。 如果存在多個(gè)時(shí)間函數(shù)，每個(gè)時(shí)間函數(shù)將運(yùn)用到對(duì)應(yīng)的transition-property的屬性上。若時(shí)間函數(shù)個(gè)數(shù)少于transition-property個(gè)數(shù)，則由ease填補(bǔ)缺少的時(shí)間函數(shù)；若時(shí)間函數(shù)個(gè)數(shù)多于transition-property個(gè)數(shù)，則取對(duì)應(yīng)數(shù)量的時(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í)間函數(shù)，x1、x2必須在[0, 1]區(qū)間內(nèi)，y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。

1.10 -webkit-backface-visibility

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

語法：

-webkit-backface-visibility: visible | hidden

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

1.11 -webkit-animation

設(shè)置動(dòng)畫效果。接受多組值，用,隔開。默認(rèn)值為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的簡(jiǎn)寫形式。

語法：

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

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

1.12 -webkit-animation-delay

設(shè)置動(dòng)畫延遲時(shí)間。默認(rèn)值為0s。

語法：

-webkit-animation-delay:  [, ]*

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

1.13 -webkit-animation-direction

檢索或設(shè)置對(duì)象執(zhí)行動(dòng)畫的運(yùn)動(dòng)方向。默認(rèn)值為normal。

語法：

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

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

1.14 -webkit-animation-duration

檢索或設(shè)置對(duì)象動(dòng)畫的持續(xù)時(shí)間。默認(rèn)值為0s。

語法：

-webkit-animation-duration:  [, ]*

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

1.15 -webkit-animation-fill-mode

檢索或設(shè)置對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。默認(rèn)值為none。

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

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

1.16 -webkit-animation-iteration-count

指定對(duì)象動(dòng)畫的執(zhí)行次數(shù)。默認(rèn)值為1。

語法：

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

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

1.17 -webkit-animation-name

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

語法：

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

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

1.18 -webkit-animation-play-state

檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)。默認(rèn)值為running。

語法：

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

running 動(dòng)畫運(yùn)動(dòng)中。 paused 動(dòng)畫暫停。

1.19 -webkit-animation-timing-function

檢索或設(shè)置對(duì)象動(dòng)畫的時(shí)間函數(shù)。默認(rèn)值為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 默認(rèn)值。平滑過渡；等同于貝塞爾曲線(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í)間函數(shù)，x1、x2必須在[0, 1]區(qū)間內(nèi)，y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。 steps(, ) 階躍時(shí)間函數(shù)，第一個(gè)參數(shù)設(shè)定時(shí)間函數(shù)中的間隔次數(shù)，必須是正整數(shù)；第二個(gè)可選，設(shè)定動(dòng)畫在間隔的開始還是結(jié)束發(fā)生階躍變化，接受start或end關(guān)鍵字，默認(rèn)為end。Chr8+、Saf5.1+、Android 4.0+、iOS 5.0+。 step-start 相當(dāng)于steps(1, start)。 step-end 相當(dāng)于steps(1, end)。

1.20 -webkit-box-shadow

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

語法：

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

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

1.21 -webkit-box-sizing

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

語法：

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

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

1.22 -webkit-border-image

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

語法：

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

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

1.23 -webkit-border-radius

設(shè)置或檢索對(duì)象使用圓角邊框。每一個(gè)角的弧線形狀可以通過分別控制水平圓的半徑和垂直圓的半徑來定義。圓角是應(yīng)用在整個(gè)背景上。即使元素沒有邊框，圓角剪切的位置也將根據(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}

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

1.24 -webkit-padding-start

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

語法：

-webkit-padding-start:  | 

定義一個(gè)寬度 定義一個(gè)百分比

1.25 -webkit-text-size-adjust

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

語法：

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

none 字體大小不會(huì)自動(dòng)調(diào)整。 auto 默認(rèn)值，字體大小會(huì)根據(jù)設(shè)備/瀏覽器來自動(dòng)調(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中可點(diǎn)擊元素的高亮顏色。該屬性可以只設(shè)置透明度。如果未設(shè)置透明度，iOS Safari使用默認(rèn)的透明度。當(dāng)透明度設(shè)為0，則會(huì)禁用此屬性；當(dāng)透明度設(shè)為1，元素在點(diǎn)擊時(shí)不可見。除了iOS Safari，大部分android手機(jī)也是支持的，只是顯示效果有所不同。

語法：

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

color 顏色。 transparent 透明。常用于android平臺(tái)。

1.28 -webkit-writing-mode

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

語法：

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

horizontal-tb 默認(rèn)值。水平方向從左向右、垂直方向自上而下的書寫方式。即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

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

語法：

-webkit-touch-callout：none | default

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

1.30 -webkit-filter

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

CSS標(biāo)準(zhǔn)里包含了一些已實(shí)現(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è)置對(duì)象的模糊效果。 brightness(<percentage>) 設(shè)置對(duì)象的亮度。除了百分比外，也可以用非負(fù)數(shù)表達(dá)。 contrast(<percentage>) 設(shè)置對(duì)象的對(duì)比度。除了百分比外，也可以用0-1的數(shù)字表達(dá)。 grayscale(<percentage>) 設(shè)置對(duì)象的灰度。除了百分比外，也可以用0-1的數(shù)字表達(dá)。 hue-rotate(<number>deg) 設(shè)置對(duì)象的色相旋轉(zhuǎn)。用0-360數(shù)字表達(dá)。 invert(<percentage>) 設(shè)置對(duì)象的反色。除了百分比外，也可以用0-1的數(shù)字表達(dá)。 opacity(<percentage>) 設(shè)置對(duì)象的透明度。除了百分比外，也可以用0-1的數(shù)字表達(dá)。 saturate(<percentage>) 設(shè)置對(duì)象的飽和度。除了百分比外，也可以用非負(fù)數(shù)表達(dá)。 sepia(<percentage>) 設(shè)置對(duì)象的褐色程度。除了百分比外，也可以用0-1的數(shù)字表達(dá)。 drop-shadow(<length①> <length②> radius <color>) 設(shè)置對(duì)象的陰影。第一個(gè)長(zhǎng)度是向右偏移距離，第二個(gè)長(zhǎng)度是向下偏移距離，皆可為負(fù)值，皆為必傳參數(shù)；第三個(gè)是陰影圓角，可選；第四個(gè)是陰影顏色，可選。 url(path.svg#a) 設(shè)置對(duì)象濾鏡效果。通過SVG可實(shí)現(xiàn)以上所有效果。SVG可寫在頁面里，也可外部引用。可增加錨節(jié)點(diǎn)。