-webkit-
prefix
-webkit-
properties
Applications based on WebKit or Blink, such as Safari and Chrome, support a number of special
WebKit extensions to
CSS
. These extensions are generally prefixed with
-webkit-
. Most
-webkit-
prefixed properties also work with an
-apple-
prefix. A few are prefixed with
-epub-
.
注意: Avoid using on websites. These properties will only work in WebKit applications.
-webkit-backdrop-filter
-webkit-background-composite
-webkit-border-after
**
-webkit-border-after-color
**
-webkit-border-after-style
**
-webkit-border-after-width
**
-webkit-border-before
**
-webkit-border-before-color
**
-webkit-border-before-style
**
-webkit-border-before-width
**
-webkit-border-end
**
-webkit-border-end-color
**
-webkit-border-end-style
**
-webkit-border-end-width
**
-webkit-border-fit
-webkit-border-horizontal-spacing
-webkit-border-start
**
-webkit-border-start-color
**
-webkit-border-start-style
**
-webkit-border-start-width
**
-webkit-border-vertical-spacing
-webkit-box-align
**
-webkit-box-direction
**
-webkit-box-flex-group
**
-webkit-box-flex
**
-webkit-box-lines
**
-webkit-box-ordinal-group
**
-webkit-box-orient
**
-webkit-box-pack
**
-webkit-box-reflect
**
-webkit-column-axis
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-progression
-webkit-cursor-visibility
-webkit-dashboard-region
-webkit-font-size-delta
-webkit-font-smoothing
-webkit-highlight
-webkit-hyphenate-character
-webkit-hyphenate-limit-after
-webkit-hyphenate-limit-before
-webkit-hyphenate-limit-lines
-webkit-initial-letter
-webkit-line-align
-webkit-line-box-contain
-webkit-line-clamp
-webkit-line-grid
-webkit-line-snap
-webkit-locale
-webkit-logical-height
-webkit-logical-width
-webkit-margin-after-collapse
-webkit-margin-after
-webkit-margin-before-collapse
-webkit-margin-before
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-end
**
-webkit-margin-start
**
-webkit-margin-top-collapse
-webkit-marquee-direction
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-marquee-speed
-webkit-marquee-style
-webkit-marquee
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-box-image
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-mask-source-type
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width
-webkit-padding-after
**
-webkit-padding-before
**
-webkit-padding-end
**
-webkit-padding-start
**
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust
-webkit-tap-highlight-color
-webkit-text-combine
-webkit-text-decoration-skip
-webkit-text-decorations-in-effect
-webkit-text-fill-color
-webkit-text-security
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-text-stroke
-webkit-text-zoom
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
* A few are on the standards, unprefixed track
** New syntax has been standardized. Property links to the new synax. Old prefixed syntax is still supported in some browsers.
-webkit-appearance
-webkit-font-size-delta
-webkit-mask-composite
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
注意: To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below.
-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-backface-visibility
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-image
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-box-decoration-break
-webkit-box-shadow
-webkit-box-sizing
-webkit-clip-path
-webkit-column-count
-webkit-column-fill
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-color
-webkit-column-rule-style
-webkit-column-rule-width
-webkit-column-span
-webkit-column-width
-webkit-columns
-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap
-webkit-font-feature-settings
-webkit-font-kerning
-webkit-font-variant-ligatures
-webkit-grid
-webkit-grid-area
-webkit-grid-auto-columns
-webkit-grid-auto-flow
-webkit-grid-auto-rows
-webkit-grid-column
-webkit-grid-column-end
-webkit-grid-column-gap
-webkit-grid-column-start
-webkit-grid-gap
-webkit-grid-row
-webkit-grid-row-end
-webkit-grid-row-gap
-webkit-grid-row-start
-webkit-grid-template
-webkit-grid-template-areas
-webkit-grid-template-columns
-webkit-grid-template-rows
-webkit-hyphens
-webkit-justify-content
-webkit-justify-items
-webkit-justify-self
-webkit-line-break
-webkit-mask
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-repeat
-webkit-mask-size
-epub-text-decoration
-webkit-text-color-decoration
-webkit-text-decoration-line
-webkit-text-decoration-style
-epub-text-emphasis
-webkit-text-emphasis
-epub-text-emphasis-color
-webkit-text-emphasis-color
-webkit-text-emphasis-position
-epub-text-emphasis-style
-webkit-text-emphasis-style
-webkit-text-justify
-webkit-text-orientation
-webkit-text-size-adjust
-webkit-text-underline-position
-webkit-transform
-webkit-transform-origin
-webkit-transform-style
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function
The following properties are supported in at least one browser without a prefix, but are not on the standards track.
* Supported unprefixed in Firefox, with prefix in Safari.
-webkit-
prefix
The following properties are supported with the
-webkit-
prefix in Firefox. Many of these are supported with no prefix as well: see
Formerly proprietary properties that are now standard
above.
Note: Due to the legacy code in a multitude of web sites that used -webkit- prefixed properties, Edge and Firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents.
-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-appearance
*
-webkit-backface-visibility
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-image
-webkit-border-radius
-webkit-box-align
**, ***
-webkit-box-direction
**, ***
-webkit-box-flex
**, ***
-webkit-box-orient
**, ***
-webkit-box-pack
**, ***
-webkit-box-shadow
-webkit-box-sizing
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap
-webkit-mask
-webkit-mask-clip
-webkit-mask-composite
*
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x
**
-webkit-mask-position-y
**
-webkit-mask-repeat
-webkit-mask-size
-webkit-text-fill-color
**
-webkit-text-size-adjust
-webkit-text-stroke
**
-webkit-text-stroke-color
**
-webkit-text-stroke-width
**
-webkit-transform
-webkit-transform-origin
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function
*Supported with
-moz-
and
-webkit-
prefix in Firefox, but not supported without a prefix. Microsoft Edge and IE Mobile support this property with the
-webkit-
prefix, rather than
-ms-
for interopability reasons as well.
** These values are supported even though they are not standard and are not on track to becoming standard.
*** Use flex-box properties instead.
-webkit-
properties
The following properties were once supported with the -webkit- prefix but are no longer supported in evergreen browsers, with or without the
-webkit-
prefix.
-webkit-alt*
-webkit-color-correction
-webkit-flow-from
-webkit-flow-into
-webkit-grid-columns
(见
grid-column)
-webkit-grid-rows
(见
grid-row)
-webkit-hyphenate-charset
-webkit-image-set (See
image-set()
)
-webkit-mask-attachment
-webkit-match-nearest-mail-blockquote-color
-webkit-overflow-scrolling
-webkit-region-break-after
-webkit-region-break-before
-webkit-region-break-inside
-webkit-region-fragment
-webkit-shape-inside
(见
touch-action
)
background-origin-x
(unprefixed!)
background-origin-y
(unprefixed!)
* Still supported in the Safari Technology Preview, but not in a generally released browser.
:-webkit-animating-full-screen-transition
:-webkit-any()
:-webkit-any-link
*
:-webkit-autofill
:-webkit-autofill-strong-password
:-webkit-drag
:-webkit-full-page-media
:-webkit-full-screen
*
:-webkit-full-screen-ancestor
:-webkit-full-screen-document
:-webkit-full-screen-controls-hidden
* Now standard.
注意: If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with
::-webkit-
as valid.
::-webkit-file-upload-button
*
::-webkit-inner-spin-button
::-webkit-input-placeholder
::-webkit-media-controls
::-webkit-media-controls-current-time-display
::-webkit-media-controls-enclosure
::-webkit-media-controls-fullscreen-button
::-webkit-media-controls-mute-button
::-webkit-media-controls-overlay-enclosure
::-webkit-media-controls-panel
::-webkit-media-controls-play-button
::-webkit-media-controls-timeline
::-webkit-media-controls-time-remaining-display
::-webkit-media-controls-toggle-closed-captions-button
::-webkit-media-controls-volume-control-container
::-webkit-media-controls-volume-control-hover-background
::-webkit-media-controls-volume-slider
::-webkit-meter-bar
::-webkit-meter-even-less-good-value
::-webkit-meter-inner-element
::-webkit-meter-optimum-value
::-webkit-meter-suboptimum-value
-webkit-media-text-track-container
::-webkit-outer-spin-button
::-webkit-progress-bar
::-webkit-progress-inner-element
::-webkit-progress-value
::-webkit-search-cancel-button
::-webkit-search-results-button
::-webkit-slider-runnable-track
::-webkit-slider-thumb
* Now standard.
注意: Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.
-webkit-animation
-webkit-device-pixel-ratio
-webkit-transform-2d
-webkit-transform-3d
-webkit-transition
-webkit-border-before
-webkit-box-reflect
-webkit-line-clamp
-webkit-mask-attachment
-webkit-mask-composite
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-overflow-scrolling
-webkit-tap-highlight-color
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack