-webkit-appearance:none
-webkit-perspective: none |
1.3 -webkit-transform
設置或檢索對象的轉換
語法:
(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
設置或檢索對象以某個原點進行轉換。該屬性提供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
設置子元素如何在3D空間相對其父元素渲染。該屬性聲明在父元素上,僅在其子元素運用了transform才有效。
語法:
-webkit-transform-style: flat | preserve-3d
flat 子元素運用transform時不保留其3D位置。
preserve-3d 子元素運用transform時保留其3D位置。
1.6 -webkit-transform-delay
檢索或設置對象延遲過渡的時間。接受多個時間,用,隔開。默認0s。
若存在多個延遲時間,每個延遲時間將運用到對應的transition-property的屬性上。若持續(xù)時間個數(shù)少于transition-property個數(shù),則由0s填補缺少的延遲時間;若延遲時間個數(shù)多于transition-property個數(shù),則取對應數(shù)量的延遲時間。
語法:
-webkit-transition-delay:
time 指定對象過渡的延遲時間。若為負值,過渡將立即執(zhí)行,但過渡將從過渡周期某處開始。
1.7 -webkit-transition-duration
指定對象過渡的持續(xù)時間。接受多個時間,用,隔開。默認值為0s。
若存在多個持續(xù)時間,每個持續(xù)時間將運用到對應的transition-property的屬性上。若持續(xù)時間個數(shù)少于transition-property個數(shù),則重復持續(xù)時間列表;若持續(xù)時間個數(shù)多于transition-property個數(shù),則取對應數(shù)量的持續(xù)時間。
-webkit-transition-duration:
[ , ]*
time 指定對象過渡的時間,不接受負值。
1.8 -webkit-transition-property
檢索或設置對象中的參與過渡的屬性。接受多個屬性,用,隔開。默認值為all。
語法:
-webkit-transition-property: all | none |
[ , ]*
all 所有能動畫的CSS屬性
none 不指定過渡的CSS屬性
1.9 -webkit-transition-timing-function
檢索或設置對象中過渡的時間函數(shù)。接受多個時間函數(shù),用,隔開。默認值為ease。
如果存在多個時間函數(shù),每個時間函數(shù)將運用到對應的transition-property的屬性上。若時間函數(shù)個數(shù)少于transition-property個數(shù),則由ease填補缺少的時間函數(shù);若時間函數(shù)個數(shù)多于transition-property個數(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ù),x1、x2必須在[0, 1]區(qū)間內,y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。
1.10 -webkit-backface-visibility
決定元素背面在面向用戶時是否可見。
語法:
-webkit-backface-visibility: visible | hidden
visible 默認值。背面內容可見,顯示正面內容的鏡像。
hidden 背面內容不可見。
1.11 -webkit-animation
設置動畫效果。接受多組值,用,隔開。默認值為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ù)。
single-animation-delay 指定對象動畫延遲的時間。
single-animation-iteration-count 指定對象動畫的循環(huán)次數(shù)。
single-animation-direction 檢索或設置對象動畫在循環(huán)中是否反向運動。
single-animation-fill-mode 檢索或設置對象動畫時間之外的狀態(tài)。
single-animation-play-state 檢索或設置對象動畫的狀態(tài)。
1.12 -webkit-animation-delay
設置動畫延遲時間。默認值為0s。
語法:
-webkit-animation-delay:
[, ]*
single-animation-delay 指定對象動畫的持續(xù)時間。若為負值,動畫將立即執(zhí)行,但動畫將從動畫周期某處開始。
1.13 -webkit-animation-direction
檢索或設置對象執(zhí)行動畫的運動方向。默認值為normal。
語法:
-webkit-animation-direction: normal | alternate | alternate-reverse | reverse
normal 指定對象的動畫正向執(zhí)行。
alternate 指定對象的動畫在奇數(shù)次動畫周期正向執(zhí)行、偶數(shù)次動畫周期反向執(zhí)行。動畫在反向執(zhí)行時,其對應的時間函數(shù)也相應反向。奇偶取決于開始時是奇數(shù)還是偶數(shù)。
alternate-reverse 與alternate相反,指定對象的動畫在奇數(shù)次動畫周期反向執(zhí)行、偶數(shù)次動畫周期正向執(zhí)行。奇偶取決于開始時是奇數(shù)還是偶數(shù)。
reverse 指定對象的動畫反向執(zhí)行。
1.14 -webkit-animation-duration
檢索或設置對象動畫的持續(xù)時間。默認值為0s。
語法:
-webkit-animation-duration:
[, ]*
single-animation-duration 指定對象動畫的持續(xù)時間。瀏覽器將忽略負值對應的聲明。
1.15 -webkit-animation-fill-mode
檢索或設置對象動畫時間之外的狀態(tài)。默認值為none。
-webkit-animation-fill-mode: none | forwards | backwards | both
none 默認值。動畫幀不會運用到對象非動畫周期中。
forwards 設置對象狀態(tài)為動畫結束幀(用于對象的最后一幀)。若動畫執(zhí)行次數(shù)為0,則狀態(tài)為第一次的動畫首幀。結束幀與執(zhí)行次數(shù)和運動方向有關。
backwards 設置對象狀態(tài)為動畫首幀(用于對象的第一幀),并在延遲時間周期內保持該狀態(tài)。首幀與運動方向有關。
both 設置對象狀態(tài)為動畫首幀和結束幀。
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
檢索或設置對象所應用的動畫名稱列表,必須與規(guī)則@keyframes配合使用,動畫名稱由@keyframes定義。默認值為none
語法:
-webkit-animation-name: none |
[, ]*
none 元素不引用任何動畫名稱或禁用元素已有動畫。
single-animation-name 引用動畫的名稱。
1.18 -webkit-animation-play-state
檢索或設置對象動畫的狀態(tài)。默認值為running。
語法:
-webkit-animation-play-state: running | paused
running 動畫運動中。
paused 動畫暫停。
1.19 -webkit-animation-timing-function
檢索或設置對象動畫的時間函數(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ū)間內,y1、y2可超過此范圍。Chr16+、Saf Nightly、Android ?。 steps(, ) 階躍時間函數(shù),第一個參數(shù)設定時間函數(shù)中的間隔次數(shù),必須是正整數(shù);第二個可選,設定動畫在間隔的開始還是結束發(fā)生階躍變化,接受start或end關鍵字,默認為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ù)值以逗號分隔。
對應的腳本特性為boxShadow。
語法:
-webkit-box-shadow:none |
① ② ③ ④ inset
none 無陰影
1.21 -webkit-box-sizing
設置或檢索對象的盒模型組成模式。
對應的腳本特性為boxSizing。
語法:
-webkit-box-sizing:content-box | border-box
content-box padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和,即 ( Element width = width + border + padding )。此屬性表現(xiàn)為標準模式下的盒模型。此值為默認值
border-box padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值,即使定義有border和padding也不會改變對象的實際寬度,即 ( Element width = width )。此屬性表現(xiàn)為怪異模式下的盒模型。
1.22 -webkit-border-image
設置或檢索對象的邊框樣式并且用圖像來進行填充。border-image屬性可以用圖像替代border-style樣式。當值為none時,將顯示border-style樣式。
語法:
-webkit-border-image:
| [ | | ]* |
1.23 -webkit-border-radius
設置或檢索對象使用圓角邊框。每一個角的弧線形狀可以通過分別控制水平圓的半徑和垂直圓的半徑來定義。圓角是應用在整個背景上。即使元素沒有邊框,圓角剪切的位置也將根據(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}
1.24 -webkit-padding-start
-webkit-padding-start指定給元素進行內填充。元素的文本方向屬性決定填充的方向。如果文本方向從左到右(ltr),則在元素左邊設置填充;否則它在元素右邊設置填充。
語法:
-webkit-padding-start:
|
1.25 -webkit-text-size-adjust
用于移動端中瀏覽器的頁面文本大小調整。
語法:
-webkit-text-size-adjust: none | auto |
none 字體大小不會自動調整。
auto 默認值,字體大小會根據(jù)設備/瀏覽器來自動調整。
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中可點擊元素的高亮顏色。該屬性可以只設置透明度。如果未設置透明度,iOS Safari使用默認的透明度。當透明度設為0,則會禁用此屬性;當透明度設為1,元素在點擊時不可見。除了iOS Safari,大部分android手機也是支持的,只是顯示效果有所不同。
語法:
-webkit-tap-highlight-color: color | transparent
color 顏色。
transparent 透明。常用于android平臺。
1.28 -webkit-writing-mode
設置或檢索對象的內容塊固有的書寫方向。
語法:
-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瀏覽器將顯示鏈接有關的系統(tǒng)默認菜單。這個屬性可以讓你禁用系統(tǒng)默認菜單。
語法:
-webkit-touch-callout:none | default
none:系統(tǒng)默認菜單被禁用
default:系統(tǒng)默認菜單不被禁用
1.30 -webkit-filter
CSS濾鏡屬性,可以在元素呈現(xiàn)之前,為元素的渲染提供一些效果,如模糊、顏色轉移之類的。濾鏡常用于調整圖像、背景、邊框的渲染。
CSS標準里包含了一些已實現(xiàn)預設效果的函數(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) 設置對象的模糊效果。
brightness(<percentage>) 設置對象的亮度。除了百分比外,也可以用非負數(shù)表達。
contrast(<percentage>) 設置對象的對比度。除了百分比外,也可以用0-1的數(shù)字表達。
grayscale(<percentage>) 設置對象的灰度。除了百分比外,也可以用0-1的數(shù)字表達。
hue-rotate(<number>deg) 設置對象的色相旋轉。用0-360數(shù)字表達。
invert(<percentage>) 設置對象的反色。除了百分比外,也可以用0-1的數(shù)字表達。
opacity(<percentage>) 設置對象的透明度。除了百分比外,也可以用0-1的數(shù)字表達。
saturate(<percentage>) 設置對象的飽和度。除了百分比外,也可以用非負數(shù)表達。
sepia(<percentage>) 設置對象的褐色程度。除了百分比外,也可以用0-1的數(shù)字表達。
drop-shadow(<length①> <length②> radius <color>) 設置對象的陰影。第一個長度是向右偏移距離,第二個長度是向下偏移距離,皆可為負值,皆為必傳參數(shù);第三個是陰影圓角,可選;第四個是陰影顏色,可選。
url(path.svg#a) 設置對象濾鏡效果。通過SVG可實現(xiàn)以上所有效果。SVG可寫在頁面里,也可外部引用??稍黾渝^節(jié)點。
更多建議: