--- title: scale slug: Web/CSS/scale tags: - CSS - transform translation_of: Web/CSS/scale --- <div>{{CSSRef}}{{SeeCompatTable}}</div> <p>CSS属性 <strong><code>scale</code></strong> 允许你可以分别且独立地指定CSS属性 {{CSSxRef("transform")}} 缩放的比例。这更好地映射到典型的UI(用户界面)用法中,并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。</p> <h2 id="语法">语法</h2> <pre class="brush: css">/* 关键值 */ scale: none; /* 单个值 */ /* 设定比1大的数值使该元素变大 */ scale: 2; /* 设定比1小的数值使该元素缩小 */ scale: 0.5; /* 两个值 */ scale: 2 0.5; /* 三个值 */ scale: 2 0.5 2;</pre> <h3 id="取值">取值</h3> <dl> <dt>单一数值</dt> <dd>单一的数值即指定了一个缩放系数,同时作用于X轴和Y轴让该元素进行缩放,相当于指定了单个值的scale()(2D缩放)函数。</dd> <dt>两个长度/百分比值</dt> <dd>两个数值即分别指定了2D比例的X轴和Y轴的缩放系数,相当于指定了两个值的scale()(2D缩放)函数。</dd> <dt>三个长度/百分比值</dt> <dd>三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。</dd> <dt id="none"><code>none</code></dt> <dd>指定不进行缩放。</dd> </dl> <h3 id="标准语法">标准语法</h3> {{CSSSyntax}} <h2 id="示例">示例</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div> <p class="scale">Scaling</p> </div></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } </pre> <h3 id="结果">结果</h3> <p>{{EmbedLiveSample("Examples")}}</p> <h2 id="规范">规范</h2> <table class="standard-table"> <thead> <tr> <th scope="col">规范</th> <th scope="col">状态</th> <th scope="col">备注</th> </tr> </thead> <tbody> <tr> <td>{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}</td> <td>{{Spec2("CSS Transforms 2")}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <p>{{CSSInfo}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("css.properties.scale")}}</p>