常用-webkit前缀属性合集

-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个参数值，默认值为50% 50% 0；提供2个参数值，默认为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的属性上。若持续时间个数少于transition-property个数，则由0s填补缺少的延迟时间；若延迟时间个数多于transition-property个数，则取对应数量的延迟时间。

语法：

-webkit-transition-delay: [ , ]*

time 指定对象过渡的延迟时间。若为负值，过渡将立即执行，但过渡将从过渡周期某处开始。

1.7 -webkit-transition-duration

指定对象过渡的持续时间。接受多个时间，用,隔开。默认值为0s。 若存在多个持续时间，每个持续时间将运用到对应的transition-property的属性上。若持续时间个数少于transition-property个数，则重复持续时间列表；若持续时间个数多于transition-property个数，则取对应数量的持续时间。

-webkit-transition-duration: [ , ]*

time 指定对象过渡的时间，不接受负值。

1.8 -webkit-transition-property

检索或设置对象中的参与过渡的属性。接受多个属性，用,隔开。默认值为all。

语法：

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

all 所有能动画的CSS属性 none 不指定过渡的CSS属性 指定要过渡的CSS属性

1.9 -webkit-transition-timing-function

检索或设置对象中过渡的时间函数。接受多个时间函数，用,隔开。默认值为ease。 如果存在多个时间函数，每个时间函数将运用到对应的transition-property的属性上。若时间函数个数少于transition-property个数，则由ease填补缺少的时间函数；若时间函数个数多于transition-property个数，则取对应数量的时间函数。

语法：

-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) 自定义时间函数，x1、x2必须在[0, 1]区间内，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 指定对象动画的持续时间。 single-animation-timing-function 检索或设置对象动画的时间函数。 single-animation-delay 指定对象动画延迟的时间。 single-animation-iteration-count 指定对象动画的循环次数。 single-animation-direction 检索或设置对象动画在循环中是否反向运动。 single-animation-fill-mode 检索或设置对象动画时间之外的状态。 single-animation-play-state 检索或设置对象动画的状态。

1.12 -webkit-animation-delay

设置动画延迟时间。默认值为0s。

语法：

-webkit-animation-delay:  [, ]*

single-animation-delay 指定对象动画的持续时间。若为负值，动画将立即执行，但动画将从动画周期某处开始。

1.13 -webkit-animation-direction

检索或设置对象执行动画的运动方向。默认值为normal。

语法：

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

normal 指定对象的动画正向执行。 alternate 指定对象的动画在奇数次动画周期正向执行、偶数次动画周期反向执行。动画在反向执行时，其对应的时间函数也相应反向。奇偶取决于开始时是奇数还是偶数。 alternate-reverse 与alternate相反，指定对象的动画在奇数次动画周期反向执行、偶数次动画周期正向执行。奇偶取决于开始时是奇数还是偶数。 reverse 指定对象的动画反向执行。

1.14 -webkit-animation-duration

检索或设置对象动画的持续时间。默认值为0s。

语法：

-webkit-animation-duration:  [, ]*

single-animation-duration 指定对象动画的持续时间。浏览器将忽略负值对应的声明。

1.15 -webkit-animation-fill-mode

检索或设置对象动画时间之外的状态。默认值为none。

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

none 默认值。动画帧不会运用到对象非动画周期中。 forwards 设置对象状态为动画结束帧（用于对象的最后一帧）。若动画执行次数为0，则状态为第一次的动画首帧。结束帧与执行次数和运动方向有关。 backwards 设置对象状态为动画首帧（用于对象的第一帧），并在延迟时间周期内保持该状态。首帧与运动方向有关。 both 设置对象状态为动画首帧和结束帧。

1.16 -webkit-animation-iteration-count

指定对象动画的执行次数。默认值为1。

语法：

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

infinite 指定对象动画无限循环。 single-animation-iteration-count 指定对象动画的执行次数。接受非负数，如1.5，则将执行1.5个动画周期。

1.17 -webkit-animation-name

检索或设置对象所应用的动画名称列表，必须与规则@keyframes配合使用，动画名称由@keyframes定义。默认值为none

语法：

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

none 元素不引用任何动画名称或禁用元素已有动画。 single-animation-name 引用动画的名称。

1.18 -webkit-animation-play-state

检索或设置对象动画的状态。默认值为running。

语法：

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

running 动画运动中。 paused 动画暂停。

1.19 -webkit-animation-timing-function

检索或设置对象动画的时间函数。默认值为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) 自定义时间函数，x1、x2必须在[0, 1]区间内，y1、y2可超过此范围。Chr16+、Saf Nightly、Android ?。 steps(, ) 阶跃时间函数，第一个参数设定时间函数中的间隔次数，必须是正整数；第二个可选，设定动画在间隔的开始还是结束发生阶跃变化，接受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

设置或检索对象阴影。 可以设定多组效果，每组参数值以逗号分隔。 对应的脚本特性为boxShadow。

语法：

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

none 无阴影 ① 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ② 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③ 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 ④ 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 设置对象的阴影的颜色。 inset 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

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 )。此属性表现为标准模式下的盒模型。此值为默认值 border-box padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )。此属性表现为怪异模式下的盒模型。

1.22 -webkit-border-image

设置或检索对象的边框样式并且用图像来进行填充。border-image属性可以用图像替代border-style样式。当值为none时，将显示border-style样式。

语法：

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

设置或检索对象的边框是否用图像定义样式或图像来源路径。 设置或检索对象的边框背景图的分割方式。 设置或检索对象的边框厚度。 设置或检索对象的边框背景图的扩展。 设置或检索对象的边框背景图的扩展。

1.23 -webkit-border-radius

设置或检索对象使用圆角边框。每一个角的弧线形状可以通过分别控制水平圆的半径和垂直圆的半径来定义。圆角是应用在整个背景上。即使元素没有边框，圆角剪切的位置也将根据背景剪切的值来定义。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 默认值，字体大小会根据设备/浏览器来自动调整。 字体显示的大小。

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

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 -webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

语法：

-webkit-touch-callout：none | default

none：系统默认菜单被禁用 default：系统默认菜单不被禁用

1.30 -webkit-filter

CSS滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

CSS标准里包含了一些已实现预设效果的函数。你也可以将设定了滤镜效果的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>) 设置对象的亮度。除了百分比外，也可以用非负数表达。 contrast(<percentage>) 设置对象的对比度。除了百分比外，也可以用0-1的数字表达。 grayscale(<percentage>) 设置对象的灰度。除了百分比外，也可以用0-1的数字表达。 hue-rotate(<number>deg) 设置对象的色相旋转。用0-360数字表达。 invert(<percentage>) 设置对象的反色。除了百分比外，也可以用0-1的数字表达。 opacity(<percentage>) 设置对象的透明度。除了百分比外，也可以用0-1的数字表达。 saturate(<percentage>) 设置对象的饱和度。除了百分比外，也可以用非负数表达。 sepia(<percentage>) 设置对象的褐色程度。除了百分比外，也可以用0-1的数字表达。 drop-shadow(<length①> <length②> radius <color>) 设置对象的阴影。第一个长度是向右偏移距离，第二个长度是向下偏移距离，皆可为负值，皆为必传参数；第三个是阴影圆角，可选；第四个是阴影颜色，可选。 url(path.svg#a) 设置对象滤镜效果。通过SVG可实现以上所有效果。SVG可写在页面里，也可外部引用。可增加锚节点。