---
title: Webkit Extensions
slug: Web/CSS/WebKit_Extensions
translation_of: Web/CSS/WebKit_Extensions
---
<p>{{ CSSRef() }}</p>
<p>{{ Draft() }}</p>
<p>WebKit支持大量的<a href="/zh-cn/CSS" title="zh-cn/CSS">CSS</a>扩展,这种css属性的前缀<code>为-webkit-</code>.</p>
<p>这些属性其中的一部分已经被包含在 CSS 规范草案中,并且可能成为最后的推荐标准,但目前仍然是试验性的属性,  还有一些属性是不规范的属性,它们没有出现在<span class="st">跟踪规范</span>中.</p>
<h3 id="WebKit-前缀属性_(跟踪规范)">WebKit-前缀属性 (跟踪规范)</h3>
<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-animation") }}</li>
  <li>{{ Cssxref("-webkit-animation-delay") }}</li>
  <li>{{ Cssxref("-webkit-animation-direction") }}</li>
  <li>{{ Cssxref("-webkit-animation-duration") }}</li>
  <li>{{ Cssxref("-webkit-animation-fill-mode") }}</li>
  <li>{{ Cssxref("-webkit-animation-iteration-count") }}</li>
  <li>{{ Cssxref("-webkit-animation-name") }}</li>
  <li>{{ Cssxref("-webkit-animation-play-state") }}</li>
  <li>{{ Cssxref("-webkit-animation-timing-function") }}</li>
  <li>{{ Cssxref("-webkit-appearance") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-backface-visibility") }}</li>
  <li>{{ Cssxref("-webkit-border-image") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C D E</span>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-column-count") }}</li>
  <li>{{ Cssxref("-webkit-column-gap") }}</li>
  <li>{{ Cssxref("-webkit-column-width") }}</li>
  <li>{{ Cssxref("-webkit-column-rule") }}</li>
  <li>{{ Cssxref("-webkit-column-rule-width") }}</li>
  <li>{{ Cssxref("-webkit-column-rule-style") }}</li>
  <li>{{ Cssxref("-webkit-column-rule-color") }}</li>
  <li>{{ Cssxref("-webkit-columns") }}</li>
  <li>{{ Cssxref("-webkit-column-span") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">F</span><br>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-font-feature-settings") }}</li>
  <li>{{ Cssxref("-webkit-font-kerning") }}</li>
  <li>{{ Cssxref("-webkit-font-size-delta") }}</li>
  <li>{{ Cssxref("-webkit-font-variant-ligatures") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">G</span><br>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-grid-column") }}</li>
  <li>{{ Cssxref("-webkit-grid-columns") }}</li>
  <li>{{ Cssxref("-webkit-grid-row") }}</li>
  <li>{{ Cssxref("-webkit-grid-rows") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">—O</span><br>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-hyphens") }}</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P</span>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-moz-perspective") }}</li>
  <li>{{ Cssxref("-moz-perspective-origin") }}</li>
  <li>{{ Cssxref("pointer-events") }} (applying to more than SVG)</li>
 </ul>
 <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">Q—T</span><br>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ cssxref("-moz-text-align-last") }}</li>
  <li>{{ Cssxref("text-decoration-color","-moz-text-decoration-color") }}</li>
  <li>{{ Cssxref("text-decoration-line","-moz-text-decoration-line") }}</li>
  <li>{{ Cssxref("text-decoration-style","-moz-text-decoration-style") }}</li>
  <li>{{ Cssxref("-moz-transform") }}</li>
  <li>{{ Cssxref("-moz-transform-origin") }}</li>
  <li>{{ Cssxref("-moz-transform-style") }}</li>
  <li>{{ cssxref("-moz-transition") }}</li>
  <li>{{ cssxref("-moz-transition-delay") }}</li>
  <li>{{ cssxref("-moz-transition-duration") }}</li>
  <li>{{ cssxref("-moz-transition-property") }}</li>
  <li>{{ cssxref("-moz-transition-timing-function") }}</li>
 </ul>
</div>
<h3 id="WebKit-prefixed_properties_with_an_unprefixed_counterpart">WebKit-prefixed properties with an unprefixed counterpart</h3>
<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A B</span></p>
<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
 <li>{{ Cssxref("-webkit-background-clip") }}</li>
 <li>{{ Cssxref("-webkit-background-origin") }}</li>
 <li>{{ Cssxref("-webkit-background-size") }}</li>
 <li>{{ Cssxref("-webkit-border-bottom-left-radius") }}</li>
 <li>{{ Cssxref("-webkit-border-bottom-right-radius") }}</li>
 <li>{{ Cssxref("-webkit-border-radius") }}</li>
 <li>{{ Cssxref("-webkit-border-top-left-radius") }}</li>
 <li>{{ Cssxref("-webkit-border-top-right-radius") }}</li>
 <li>{{ Cssxref("-webkit-box-sizing") }}</li>
 <li>{{ Cssxref("-epub-caption-side") }}</li>
</ul>
<h3 id="私有WebKit-前缀属性（不使用网页上）"><span class="short_text" id="result_box" lang="zh-CN"><span class="alt-edited">私有</span><span>WebKit-</span><span>前缀</span><span>属性</span><span>（</span><span>不</span><span>使用</span><span>网页上</span><span>）</span></span></h3>
<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-aspect-ratio") }}</li>
  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span></li>
  <li>{{ Cssxref("-webkit-background-composite") }}</li>
  <li>{{ Cssxref("-webkit-border-after") }}</li>
  <li>{{ Cssxref("-webkit-border-after-color") }}</li>
  <li>{{ Cssxref("-webkit-border-after-style") }}</li>
  <li>{{ Cssxref("-webkit-border-after-width") }}</li>
  <li>{{ Cssxref("-webkit-border-before") }}</li>
  <li>{{ Cssxref("-webkit-border-before-color") }}</li>
  <li>{{ Cssxref("-webkit-border-before-style") }}</li>
  <li>{{ Cssxref("-webkit-border-before-width") }}</li>
  <li>{{ Cssxref("-webkit-border-end") }}</li>
  <li>{{ Cssxref("-webkit-border-end-color") }}</li>
  <li>{{ Cssxref("-webkit-border-end-style") }}</li>
  <li>{{ Cssxref("-webkit-border-end-width") }}</li>
  <li>{{ Cssxref("-webkit-border-fit") }}</li>
  <li>{{ Cssxref("-webkit-border-horizontal-spacing") }}</li>
  <li>{{ Cssxref("-webkit-border-start") }}</li>
  <li>{{ Cssxref("-webkit-border-start-color") }}</li>
  <li>{{ Cssxref("-webkit-border-start-style") }}</li>
  <li>{{ Cssxref("-webkit-border-start-width") }}{{ Cssxref("-webkit-border-vertical-spacing") }}</li>
  <li>{{ Cssxref("-webkit-box-align") }}</li>
  <li>{{ Cssxref("-webkit-box-direction") }}</li>
  <li>{{ Cssxref("-webkit-box-flex") }}</li>
  <li>{{ Cssxref("-webkit-box-flex-group") }}</li>
  <li>{{ Cssxref("-webkit-box-lines") }}</li>
  <li>{{ Cssxref("-webkit-box-ordinal-groups") }}</li>
  <li>{{ Cssxref("-webkit-box-orient") }}</li>
  <li>{{ Cssxref("-webkit-box-reflect") }}</li>
  <li>{{ cssxref("-webkit-box-pack") }}</li>
  <li>{{ Cssxref("-webkit-box-reflect") }}</li>
  <li>{{ Cssxref("-webkit-box-shadow") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-column-axis") }}</li>
  <li>{{ Cssxref("-webkit-column-break-after") }}</li>
  <li>{{ Cssxref("-webkit-column-break-before") }}</li>
  <li>{{ Cssxref("-webkit-column-break-inside") }}</li>
  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">D</span></li>
  <li>{{ Cssxref("-webkit-dashboard-region") }}</li>
  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">E—G</span></li>
  <li>{{ Cssxref("-webkit-filter") }}</li>
  <li>{{ Cssxref("-webkit-font-smoothing") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-highlight") }}</li>
  <li>{{ Cssxref("-webkit-hyphenate-charset") }}</li>
  <li>{{ Cssxref("-webkit-hyphenate-limit-after") }}</li>
  <li>{{ Cssxref("-webkit-hyphenate-limit-before") }}</li>
  <li>{{ Cssxref("-webkit-hyphenate-limit-lines") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">I—L</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-line-align") }}</li>
  <li>{{ Cssxref("-webkit-line-box-contain") }}</li>
  <li>{{ Cssxref("-webkit-line-break") }}</li>
  <li>{{ Cssxref("-webkit-line-clamp") }}</li>
  <li>{{ Cssxref("-webkit-line-grid") }}</li>
  <li>{{ Cssxref("-webkit-line-snap") }}</li>
  <li>{{ Cssxref("-webkit-locale") }}</li>
  <li>{{ Cssxref("-webkit-logical-height") }}</li>
  <li>{{ Cssxref("-webkit-logical-width") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">M</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-margin-after") }}</li>
  <li>{{ Cssxref("-webkit-margin-after-collapse") }}</li>
  <li>{{ Cssxref("-webkit-margin-before") }}</li>
  <li>{{ Cssxref("-webkit-margin-before-collapse") }}</li>
  <li>{{ Cssxref("-webkit-margin-bottom-collapse") }}</li>
  <li>{{ Cssxref("-webkit-margin-collapse") }}</li>
  <li>{{ Cssxref("-webkit-margin-end") }}</li>
  <li>{{ Cssxref("-webkit-margin-start") }}</li>
  <li>{{ Cssxref("-webkit-margin-top-collapse") }}</li>
  <li>{{ Cssxref("-webkit-marquee") }}</li>
  <li>{{ Cssxref("-webkit-marquee-direction") }}</li>
  <li>{{ Cssxref("-webkit-marquee-increment") }}</li>
  <li>{{ Cssxref("-webkit-marquee-repetition") }}</li>
  <li>{{ Cssxref("-webkit-marquee-speed") }}</li>
  <li>{{ Cssxref("-webkit-marquee-style") }}</li>
  <li>{{ Cssxref("-webkit-mask") }}</li>
  <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
  <li>{{ Cssxref("-webkit-mask-box-image") }}</li>
  <li>{{ Cssxref("-webkit-mask-box-image-outset") }}</li>
  <li>{{ Cssxref("-webkit-mask-box-image-repeat") }}</li>
  <li>{{ Cssxref("-webkit-mask-box-image-slice") }}</li>
  <li>{{ Cssxref("-webkit-mask-boximage-source") }}</li>
  <li>{{ Cssxref("-webkit-mask-box-image-width") }}</li>
  <li>{{ Cssxref("-webkit-mask-clip") }}</li>
  <li>{{ Cssxref("-webkit-mask-composite") }}</li>
  <li>{{ Cssxref("-webkit-mask-image") }}</li>
  <li>{{ Cssxref("-webkit-mask-origin") }}</li>
  <li>{{ Cssxref("-webkit-mask-position") }}</li>
  <li>{{ Cssxref("-webkit-mask-position-x") }}</li>
  <li>{{ Cssxref("-webkit-mask-position-y") }}</li>
  <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
  <li>{{ Cssxref("-webkit-mask-repeat-x") }}</li>
  <li>{{ Cssxref("-webkit-mask-repeat-y") }}</li>
  <li>{{ Cssxref("-webkit-mask-size") }}</li>
  <li>{{ Cssxref("-webkit-match-nearest-mail-blockquote-color") }}</li>
  <li>{{ Cssxref("-webkit-max-logical-height") }}</li>
  <li>{{ Cssxref("-webkit-max-logical-width") }}</li>
  <li>{{ Cssxref("-webkit-min-logical-height") }}</li>
  <li>{{ Cssxref("-webkit-min-logical-width") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">N</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-webkit-nbsp-mode") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">O</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ cssxref("-moz-orient") }}</li>
  <li>{{ Cssxref("-moz-outline-radius") }}</li>
  <li>{{ Cssxref("-moz-outline-radius-bottomleft") }}</li>
  <li>{{ Cssxref("-moz-outline-radius-bottomright") }}</li>
  <li>{{ Cssxref("-moz-outline-radius-topleft") }}</li>
  <li>{{ Cssxref("-moz-outline-radius-topright") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P Q R</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-moz-padding-end") }}</li>
  <li>{{ Cssxref("-moz-padding-start") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">S</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-moz-script-level") }}</li>
  <li>{{ Cssxref("-moz-script-min-size") }}</li>
  <li>{{ Cssxref("-moz-script-size-multiplier") }}</li>
  <li>{{ Cssxref("-moz-stack-sizing") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">T U V</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-moz-text-blink") }}</li>
  <li>{{ Cssxref("-moz-user-focus") }}</li>
  <li>{{ Cssxref("-moz-user-input") }}</li>
  <li>{{ Cssxref("-moz-user-modify") }}</li>
  <li>{{ Cssxref("-moz-user-select") }}</li>
 </ul>
 <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">W—Z</span></p>
 <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
  <li>{{ Cssxref("-moz-window-shadow") }}</li>
 </ul>
</div>
<p>{{ languages( { "en": "en/CSS/CSS_Reference/Webkit_Extensions"} ) }}</p>