diff options
Diffstat (limited to 'files/zh-cn/web/css')
5 files changed, 1354 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/gradient/linear-gradient()/index.html b/files/zh-cn/web/css/gradient/linear-gradient()/index.html new file mode 100644 index 0000000000..c8c25b68e2 --- /dev/null +++ b/files/zh-cn/web/css/gradient/linear-gradient()/index.html @@ -0,0 +1,446 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +translation_of: Web/CSS/gradient/linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.linear-gradient + +--- +<p>{{CSSRef}}</p> + +<p>CSS <strong><code>linear-gradient()</code></strong> 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。</p> + +<pre class="notranslate"><code>/* 渐变轴为45度，从蓝色渐变到红色 */ +linear-gradient(45deg, blue, red); + +/* </code>从右下到左上、从蓝色渐变到红色<code> */ +linear-gradient(to left top, blue, red); + +/* </code>从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束<code> */ +linear-gradient(0deg, blue, green 40%, red);</code></pre> + +<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} </div> + +<p>如同其他gradient函数一般，<strong><code>linear-gradient()</code></strong> 函数<a href="/zh-CN/docs/Web/CSS/image#no_intrinsic">没有内在尺寸</a>；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。</p> + +<div class="note"><strong>提示：</strong>利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。</div> + +<div class="note"><strong>提示：</strong>由于<code><gradient></code>数据类型系<code><image></code>的子数据类型，<code><gradient></code>只能被用于<code><image></code>可以使用的地方。因此，<code>linear-gradient()</code> 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。</div> + +<h2 id="线形渐变的构成"><strong>线形渐变的构成</strong></h2> + +<p>线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，<code>linear-gradient()</code> 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点</p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;">渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。</p> + +<p>起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）</p> + +<p>同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。</p> + +<p>关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。</p> + +<p>不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。</p> + +<p>当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。</p> + +<pre class="notranslate"><code>linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</code>看看 +</pre> + +<p>默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。</p> + +<pre class="notranslate"><code>linear-gradient(red 10%, 30%, blue 90%);</code></pre> + +<p>如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。</p> + +<p>颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。</p> + +<pre class="notranslate"><code>linear-gradient(red 40%, yellow 30%, blue 65%);</code></pre> + +<p>允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:</p> + +<pre class="notranslate"><code>linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</code></pre> + +<p>默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。</p> + +<h2 id="语法">语法</h2> + +<h3 id="值">值</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。<br> + to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。</dd> + <dt><code><angle></code></dt> + <dd>用角度值指定渐变的方向（或角度）。角度顺时针增加。 </dd> + <dt><code><linear-color-stop></code></dt> + <dd>由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。</dd> +</dl> + +<dl> + <dt><code><color-hint></code></dt> +</dl> + +<p>颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 </p> + +<dl> + <dt> + <div class="note"><strong>提示：</strong>渲染颜色中间点的规则 <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a>与一致 <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>。</div> + + <h3 id="正式语法">正式语法</h3> + + <pre class="notranslate">linear-gradient( + [ <a href="https://wiki.developer.mozilla.org/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + +where <side-or-corner> = [ left | right ] || [ top | bottom ] + and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> + and <linear-color-stop> = <color> [ <color-stop-length> ]? + and <color-stop-length> = [ <percentage> | <length> ]{1,2} + and <color-hint> = [ <percentage> | <length> ] +</pre> + </dt> +</dl> + +<h3 id="语法历史">语法历史</h3> + +<p><code>linear-gradient的语法</code>由2008年实施的<a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a>发展而来。</p> + +<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> +</pre> + +<p>在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。</p> + +<p>一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：</p> + +<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>新的语法不需要<code>to()、</code><code>from()<font face="Open Sans, Arial, sans-serif">和</font></code><code>color-stop()函数，所以这些函数被丢弃。而</code><code>top</code>/<code>bottom</code>与<code>left</code>/<code>right的顺序也被标记为不重要，所以</code>Mozilla移除了必需首先定义<code>top</code>/<code>bottom</code>的限制。</p> + +<p>新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到<a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient">CSS Images Values and Content Replacement Level 3 draft in 2011-02-17</a>。</p> + +<ul> + <li>原生支持{{ cssxref("<angle>") }}允许任何方向的渐变</li> + <li>定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作</li> +</ul> + +<p>在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。</p> + +<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>{{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在<a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html">related W3C CSSWG thread</a>可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 <code>to</code> 。这项语法被添加到<a href="http://www.w3.org/TR/2011/WD-css3-images-20110908/#ltlinear-gradient">CSS Images Values and Content Replacement Level 3 draft in 2011-09-08</a>。</p> + +<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>以上应当是最终语法。</p> + +<p>在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了<code>0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，</code>Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。</p> + +<h2 id="范例">范例</h2> + +<h3 id="例_45度渐变">例 45度渐变</h3> + +<p>可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。</p> + +<pre class="brush: html notranslate"><code><div style="width: 200px; height: 200px;"></div></code></pre> + +<pre class="brush: css notranslate"><code>div { + background: linear-gradient(45deg, red, blue); +}</code></pre> + +<p>{{EmbedLiveSample("45度渐变",120,120)}}</p> + +<h3 id="从60％的梯度线开始的渐变">从60％的梯度线开始的渐变</h3> + +<p>有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。</p> + +<pre class="brush: html notranslate"><code><div style="width: 200px; height: 200px;"></div></code></pre> + +<pre class="brush: css notranslate"><code>div { + background: linear-gradient(135deg, red, red 60%, blue); +}</code></pre> + +<h4 id="Result">Result:</h4> + +<p>{{EmbedLiveSample("从60％的梯度线开始的渐变")}}</p> + +<h3 id="具有多个颜色停止的渐变">具有多个颜色停止的渐变</h3> + +<p>如果第一个颜色中间点没有 <code><length></code> 或 <code><percentage></code>属性,那么它默认为0%。如果最后一个颜色中间点没有 <code><length></code> 或者 <code><percentage></code>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。</p> + +<p>颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。</p> + +<pre class="brush: html notranslate"><code><div>A rainbow made from a gradient</div></code></pre> + +<pre class="brush: css notranslate"><code>div { + background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); +}</code></pre> + +<h4 id="Result_2">Result:</h4> + +<p>{{EmbedLiveSample("具有多个颜色停止的渐变")}}</p> + +<h3 id="包含多个颜色中间点的渐变">包含多个颜色中间点的渐变</h3> + +<p>如果第一个颜色中间点没有<font face="Consolas, Liberation Mono, Courier, monospace">定义长度或百分比，</font>它将包含缺省值<font face="Consolas, Liberation Mono, Courier, monospace">0</font>。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。</p> + +<p>颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。</p> + +<div>使用渐变制作彩虹</div> + +<pre class="brush: css notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); +</pre> + +<h3 id="线性重复渐变">线性重复渐变</h3> + +<p>线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。</p> + +<h3 id="使用透明度">使用透明度</h3> + +<pre class="brush: html notranslate"><code><div></code>线性与透明度<code></div></code></pre> + +<pre class="brush: css notranslate"><code>div { + background: linear-gradient(to bottom right, red, rgba(0,0,0,0)); +}</code></pre> + +<h4 id="Result_3">Result:</h4> + +<p>{{EmbedLiveSample("使用透明度")}}</p> + +<p>如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。</p> + +<h3 id="跨浏览器实施渐变">跨浏览器实施渐变</h3> + +<p>这里包含了所有前缀的渐变设置。</p> + +<pre class="brush: css notranslate">.grad { + background-color: #F07575; /* 不支持渐变的浏览器回退方案 */ + background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ + background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */ + background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */ +} +</pre> + +<p>-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。</p> + +<div class="note"> +<p>Notes：如果将<body>标签的background-image属性设置为线性渐变<code>linear-gradient</code>，除非您还设置文档根标签（例如<html>标签）的<a href="/zh-CN/docs/Web/CSS/min-height">min-height</a>属性，否则渐变不会填充浏览器屏幕到100％。</p> +</div> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Add Interpolation hints</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16")}}<sup>[2]</sup></td> + <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[6]</sup></td> + <td>10.0<sup>[4]</sup></td> + <td>11.10{{property_prefix("-o")}}<sup>[1]</sup></td> + <td>5.1{{property_prefix("-webkit")}}<sup>[6]</sup></td> + </tr> + <tr> + <td>On {{cssxref("border-radius")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On any other property that accepts {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Legacy webkit syntax{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>3{{property_prefix("-webkit")}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0{{property_prefix("-webkit")}}<sup>[3]</sup></td> + </tr> + <tr> + <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[5]</sup></td> + <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[3]</sup></td> + <td>10</td> + <td>11.10{{property_prefix("-o")}}<sup>[5]</sup></td> + <td>5.1{{property_prefix("-webkit")}}<sup>[3]</sup></td> + </tr> + <tr> + <td>Standard syntax (using the <code>to</code> keyword)</td> + <td>{{CompatGeckoDesktop("16")}}</td> + <td>26.0 (537.27)</td> + <td>10</td> + <td>12.10</td> + <td>6.1</td> + </tr> + <tr> + <td>Interpolation hints (a percent without a color)</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>40</td> + <td>{{CompatUnknown}}</td> + <td>27</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Unitless 0 for <code><angle></code></td> + <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}<sup>[7]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>Edge 12</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> + <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("16")}}[2]</td> + <td>16{{property_prefix("-webkit")}}<br> + 26</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On {{cssxref("border-radius")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On any other property that accepts {{cssxref("<image>")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Legacy webkit syntax{{non-standard_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard syntax (using the <code>to</code> keyword)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Interpolation hints (a percent without a color)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> + +<p>[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.</p> + +<p>[3] WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p>[4] Internet Explorer 5.5 through 9.0 supports proprietary <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p>[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a 'from' position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60.</p> + +<p>In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<p>[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>. WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p>[7] <code>linear-gradient(0, pink, teal)</code> equivalent to <code>linear-gradient(0deg, pink, teal)</code>,See {{bug("1239153")}}.</p> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}};</li> + <li>Some properties where it can be used: {{cssxref("background-image")}}, {{cssxref("background")}};</li> + <li><a href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> + <li><a href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> +</ul> diff --git a/files/zh-cn/web/css/gradient/radial-gradient()/index.html b/files/zh-cn/web/css/gradient/radial-gradient()/index.html new file mode 100644 index 0000000000..78750ad563 --- /dev/null +++ b/files/zh-cn/web/css/gradient/radial-gradient()/index.html @@ -0,0 +1,196 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient() +translation_of: Web/CSS/gradient/radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.radial-gradient +--- +<p>{{CSSRef}}</p> + +<p> <code>radial-gradient()</code> CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。</p> + +<p>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</p> + +<p>与其它渐变相同，径向渐变是一个<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image#no_intrinsic">不固定尺寸</a>的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。</p> + +<p>如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。</p> + +<p>因为 <code><gradient></code> 属于 <code><image></code> 类型，所以它可以用于任何适用于 <code><image></code> 的地方。正是因为这样，<code>radial-gradient()</code> 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。</p> + +<h2 id="radial_gradient_的组成">radial gradient 的组成</h2> + +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">径向渐变(Radial gradients)由其<em>中心点</em>、<em>边缘形状</em>轮廓、<em>两个或多个色值结束点（color stops）</em>定义而成。 </p> + +<p>为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。</p> + +<p>色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。</p> + +<h2 id="语法">语法</h2> + +<pre class="notranslate"><code>/* A gradient at the center of its container, + starting red, changing to blue, and finishing green */ +radial-gradient(circle at center, red 0, blue, green 100%)</code></pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>{{cssxref("<position>")}}</code></dt> + <dd>{{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。</dd> + <dt><code><shape></code></dt> + <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。</dd> + <dt><code><size></code></dt> + <dd>渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。</dd> + <dt><code><color-stop></code></dt> + <dd>表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值<code>0%</code>，或者长度值<code>0</code>，表示渐变中心点；百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd> + <dt><code><extent-keyword></code></dt> + <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量：</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>常量</th> + <th>描述</th> + </tr> + <tr> + <td><code>closest-side</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。</td> + </tr> + <tr> + <td><code>closest-corner</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最近的一个角相交。</td> + </tr> + <tr> + <td><code>farthest-side</code></td> + <td>与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。</td> + </tr> + <tr> + <td><code>farthest-corner</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td> + </tr> + </tbody> + </table> + + <div class="blockIndicator note"> + <p>注意：该函数的早期实现还包含其他关键字（ <code>cover</code> 和 <code>contain</code>），分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code> 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。</p> + </div> + </dd> + <dt><code><linear-color-stop></code></dt> + <dd>A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient; the value <code>100%</code> represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.</dd> + <dt><code><color-hint></code></dt> + <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + + <pre class="notranslate">radial-gradient( + [ [ circle || <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length"><length></a> ] [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | + [ ellipse || [ <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length"><length></a> | <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/percentage"><percentage></a> ]{2} ] [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | + [ [ circle | ellipse ] || <extent-keyword> ] [at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | + at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> , + ]? + <color-stop-list> [ , <color-stop-list> ]+ +) +where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side + and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> + and <linear-color-stop> = <color> [ <color-stop-length> ]? + and <color-stop-length> = [ <percentage> | <length> ]{1,2} + and <color-hint> = [ <percentage> | <length> ] +</pre> + + <div class="blockIndicator warning"> + <p>Note that negative <code><length></code>'s are not allowed, however browsers had implemented negative lengths which are now being removed. <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/css-radial-gradients-no-longer-accept-negative-radii/">See the Firefox site compat note</a>.</p> + </div> + </dt> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="Simple_gradient">Simple gradient</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">.radial-gradient { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} </pre> + +<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p> + +<h3 id="Non-centered_gradient">Non-centered gradient</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">.radial-gradient { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +}</pre> + +<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p> + +<div class="note"> +<p><strong>Note:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<p>Gecko used to have a long-standing bug whereby radial gradients like <code>radial-gradient(circle gold,red)</code> would work, even though they shouldn't because of the missing comma between <code>circle</code> and <code>gold</code>. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a <code>radial-gradient()</code> function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, released in Firefox 57) fixed these bugs.</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li> + <li>Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..c4dd9fc55d --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html @@ -0,0 +1,307 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient() +translation_of: Web/CSS/gradient/repeating-linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +<div>{{CSSRef}}</div> + +<p>CSS函数 <strong><code>repeating-linear-gradient()</code></strong> 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。</p> + +<pre class="brush: css no-line-numbers notranslate">/* 一个倾斜45度的重复线性渐变, + 从蓝色开始渐变到红色 */ +repeating-linear-gradient(45deg, blue, red); + +/* 一个从右下角到左上角的重复线性渐变, + 从蓝色开始渐变到红色 */ +repeating-linear-gradient(to left top, blue, red); + +/* 一个由下至上的重复线性渐变, + 从蓝色开始，40%后变绿， + 最后渐变到红色 */ +repeating-linear-gradient(0deg, blue, green 40%, red); +</pre> + +<p> </p> + +<p>每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。</p> + +<p>与其他渐变一样，线形重复渐变没有提供 <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">固定的尺寸</a>；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。</p> + +<div class="note"> +<p><strong>提示：</strong> 因为 <code><gradient></code> 属于<code><image></code> 数据类型，所以只能在可以使用 <code><image></code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。</p> +</div> + +<h2 id="语法">语法</h2> + +<h3 id="值">值</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。</dd> + <dd><br> + to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。</dd> + <dt>{{cssxref("<angle>")}}</dt> + <dd>用角度值指定渐变的方向（或角度）。角度顺时针增加。 </dd> + <dt><code><color-stop></code></dt> + <dd>由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。</dd> + <dd> + <div class="note"> + <p><strong>提示：</strong>渲染颜色中间点的规则<a href="#Gradient_with_multiple_color_stops">CSS渐变中的色标</a> 与<a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG渐变</a>一致.</p> + </div> + </dd> +</dl> + +<h3 id="形式语法">形式语法</h3> + +<pre class="syntaxbox notranslate">repeating-linear-gradient( [ <a href="/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + 渐变轴的定义 色标列表 + +where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> +</pre> + +<h2 id="示例">示例</h2> + +<div id="Example_shown"> +<pre class="brush: css notranslate">#grad1 { + background-image: repeating-linear-gradient(180deg, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} + +#grad2 { + background-image: repeating-linear-gradient(-45deg, + transparent, + transparent 25px, + rgba(255,255,255,1) 25px, + rgba(255,255,255,1) 50px); +} +</pre> + +<pre class="brush: html notranslate"><ol> + <li>Repeating horizontal bars + <div id="grad1"></div> + </li> + <li>Zebra stripes + <div id="grad2"></div> + </li> +</ol></pre> +</div> + +<div id="Example_hidden" class="hidden"> +<pre class="brush: css notranslate">div { + display: block; + width: 50%; + height: 80px; + border-color: #000000; + padding: 10px; +} + +#grad1 { + background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); + background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); + background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); + background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); +} + +#grad2 { + background-color: black; + background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); + background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); + background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); + background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); + background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); +} +</pre> + +<pre class="brush: html notranslate"><ol> + <li>repeating gradient + <div id="grad1"></div> + </li> + <li>Zebra pattern + <div id="grad2"></div> + </li> +</ol></pre> +</div> + +<p>{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}</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('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("16")}}<sup>[5]</sup></td> + <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup><sup>[3]</sup></td> + <td>10.0 <sup>[1]</sup></td> + <td>11.10{{property_prefix("-o")}} <sup>[3]</sup></td> + <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup><sup>[3]</sup></td> + </tr> + <tr> + <td>On {{cssxref("border-radius")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On any other property that accept {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>3{{property_prefix("-webkit")}} <sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td>Legacy <em>from </em>syntax (without <code>to</code>){{non-standard_inline}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> + Removed in {{CompatGeckoDesktop("16")}}<sup>[7]</sup></td> + <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup></td> + <td>10.0</td> + <td>11.10{{property_prefix("-o")}}<sup>[4]</sup></td> + <td>5.1{{property_prefix("-webkit")}}<sup><a href="#bc2%3E">[2]</a></sup></td> + </tr> + <tr> + <td><code>to</code> syntax</td> + <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> + {{CompatGeckoDesktop("16")}}</td> + <td>26.0</td> + <td>10.0</td> + <td>11.60{{property_prefix("-o")}}<sup>[4]</sup><br> + Presto 2.12 will remove the prefix.</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (a percent without a color)</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td><a href="https://code.google.com/p/chromium/issues/detail?id=420527">40</a></td> + <td>{{CompatUnknown}}</td> + <td>27</td> + <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> + </tr> + <tr> + <td>Unitless 0 for <code><angle></code></td> + <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}<sup>[8]</sup><br> + {{CompatNo}}<sup>[9]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>Edge 12</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> + {{CompatGeckoMobile("16")}}<sup>[5]</sup></td> + <td> + <p>16{{property_prefix("-webkit")}}<br> + 26</p> + </td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p>[2] WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p>[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> + +<p>[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> + +<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre> + +<p>is the same as:</p> + +<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre> + +<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> + +<p>[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p> + +<p>[6] {{webkitbug(1074056)}}.</p> + +<p>[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<p>[8] In <code>-webkit-linear-gradient </code>function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.</p> + +<p>[9] See {{bug("1363292")}}.</p> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients">使用CSS渐变</a></li> + <li>其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li> +</ul> diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..8ca073bbd8 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html @@ -0,0 +1,273 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient() +translation_of: Web/CSS/gradient/repeating-radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +<div>{{CSSRef}}</div> + +<p>CSS函数<strong><code>repeating-radial-gradient()</code></strong> 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。</p> + +<pre class="brush: css no-line-numbers notranslate">/* 一个从容器中心点开始的重复渐变, + 从红色开始，渐变到蓝色，再渐变到绿色 */ +repeating-radial-gradient(circle at center, red 0, blue, green 30px); +</pre> + +<p>每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。</p> + +<p>与其他渐变一样，线形重复渐变没有提供<a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">固定的尺寸</a>； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。</p> + +<div class="note"> +<p><strong>提示：</strong> 因为 <code><gradient></code> 属于<code><image></code> 数据类型，所以只能在可以使用 <code><image></code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。</p> +</div> + +<h2 id="语法">语法</h2> + +<h3 id="值">值</h3> + +<dl> + <dt>{{cssxref("<position>")}}</dt> + <dd><code>position</code>与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 <code>center</code>.</dd> + <dt>{{cssxref("<angle>")}}</dt> + <dd>渐变轴的角度。角度顺时针增加，默认值为<code>0deg</code>。</dd> + <dt>{{cssxref("<shape>")}}</dt> + <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 <code>ellipse</code>。</dd> + <dt><code><extent-keyword></code></dt> + <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量：</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>Keyword</th> + <th>Description</th> + </tr> + <tr> + <td><code>closest-side</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。</td> + </tr> + <tr> + <td><code>closest-corner</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最近的一个角相交。</td> + </tr> + <tr> + <td><code>farthest-side</code></td> + <td>与 <code>closest-side</code>相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。</td> + </tr> + <tr> + <td><code>farthest-corner</code></td> + <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>提示:</strong> 早期的草案中还包含其他关键字(<code>cover</code> and <code>contain</code>) ，分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code>,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。</p> + </div> + </dd> + <dt><code><color-stop></code></dt> + <dd>表示某个确定位置的固定色值，包含一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value" title="CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述："><code><color></code></a>值加上可选的位置值（相对虚拟渐变射线的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number."><code><percentage></code></a>或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="是表示距离尺寸的一种css数据格式。它由一个 <number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成。和任何 CSS 尺寸一样，数字和单位之间没有空格。<number> 0之后的长度单位是可选的。"><code><length></code></a>长度值）。 百分比值<code>0%</code>，或者长度值<code>0</code>，表示渐变中心点；百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd> +</dl> + +<h3 id="形式语法">形式语法</h3> + +<pre class="syntaxbox notranslate">repeating-radial-gradient( + [[ circle || <a href="/en-US/docs/CSS/length"><length></a> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + [ ellipse || [<a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + [[ circle | ellipse ] || <extent-keyword> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + at <a href="/en-US/docs/Web/CSS/position_value"><position></a> , <color-stop> [ , <color-stop> ]+ ) + \---------------------------------------------------------------/\--------------------------------/ + 定义轮廓、尺寸和结束形状的位置 色标列表 + +where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side + and<code> <color-stop> = <color> [ <percentage> | <length> ]?</code></pre> + +<h2 id="示例">示例</h2> + +<p>径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。</p> + +<h3 id="黑白相间的渐变">黑白相间的渐变</h3> + + +<pre class="brush: css notranslate" class="hidden">div { + display: block; + width: 50%; + height: 80px; + border-color: #000000; + padding: 10px; +} +#grad1 { + background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); + text-shadow: 1px 1px 0pt black; + color: white; + border: 1px solid black; + height:5.5em; +} +</pre> + +<p>{{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}</p> + +<pre class="brush: css notranslate">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);</pre> + +<h3 id="Farthest-corner渐变">Farthest-corner渐变</h3> + + +<pre class="brush: css notranslate" class="hidden">div { + display: block; + width: 50%; + height: 80px; + border-radius: 10px; + border-color: #000000; + padding: 10px; +} +#grad1 { + background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); + background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); + background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); + background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); + background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); + text-shadow: 1px 1px 0pt blue; + color: white; + border: 1px solid black; + height:5.5em; +} +</pre> + +<p>{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}</p> + +<pre class="brush: css notranslate">background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);</pre> + +<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('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> + <td>10 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td> + <td>10</td> + <td>12 {{property_prefix("-o")}}<br> + 12.5</td> + <td>5.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>On {{cssxref("border-image")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On any other property that accept {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Interpolation hints (a percent without a color)</td> + <td>40</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("46")}}</td> + <td>10</td> + <td>12.1</td> + <td>7.1</td> + </tr> + <tr> + <td>On {{cssxref("border-image")}}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On any other property that accept {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> + +<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<h2 id="参阅：">参阅：</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">使用渐变</a></li> + <li>其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li> +</ul> diff --git a/files/zh-cn/web/css/transform-function/translatex()/index.html b/files/zh-cn/web/css/transform-function/translatex()/index.html new file mode 100644 index 0000000000..c800a6c7eb --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatex()/index.html @@ -0,0 +1,132 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX() +translation_of: Web/CSS/transform-function/translateX() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +browser-compat: css.types.transform-function.translateX +--- +<div>{{CSSRef}}</div> + +<p>translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。</p> + +<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> + +<div class="note"> +<p><strong>注意</strong>： <code>translateX(tx)</code>等同于 <a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0) 或者 <a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">translateX(t) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>t</code></dt> + <dt> 代表了向量平移的横坐标长度{{cssxref("<length>")}}。</dt> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ℝ<sup>2</sup>空间中的笛卡尔坐标</th> + <th scope="col">在ℝℙ<sup>2</sup>上的投影坐标</th> + <th scope="col">在ℝ<sup>3</sup>上的笛卡尔坐标</th> + <th scope="col">在ℝℙ<sup>3</sup>上的投影坐标</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>在ℝ<sup>2 </sup>空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。</p> + </td> + <td> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + </tr> + <tr> + <td><code>[1 0 0 1 t 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css"><code>div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* 等同于 translate(10px) */ + background-color: pink; +}</code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</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("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>原始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> |