initial commit

1 files changed, 127 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/gradient/index.html b/files/zh-cn/web/css/gradient/index.html
new file mode 100644
index 0000000000..8cb033cb7b
--- /dev/null
+++ b/files/zh-cn/web/css/gradient/index.html
@@ -0,0 +1,127 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<div><strong><code>&lt;gradient&gt;</code></strong> 是一种{{cssxref("&lt;image&gt;")}}CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。</div>
+
+<div><strong><code>&lt;gradient&gt;</code></strong> <a href="/en-US/docs/CSS/image#no_intrinsic">没有内在尺寸</a>；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。</div>
+
+<h2 id="语法">语法</h2>
+
+<h3 id="渐变函数">渐变函数</h3>
+
+<p><strong><code>&lt;gradient&gt;</code></strong> 数据类型由下列函数定义。</p>
+
+<div id="linear-gradient">
+<h4 id="线形渐变"><strong>线形渐变</strong></h4>
+
+<p>颜色值沿着一条隐式的直线逐渐过渡。由{{cssxref("linear-gradient", "linear-gradient()")}}产生。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;Linear gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}</pre>
+
+<p>{{EmbedLiveSample('linear-gradient', 240, 80)}}</p>
+</div>
+
+<div id="radial-gradient">
+<h4 id="径向渐变">径向渐变</h4>
+
+<p>颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由{{cssxref("radial-gradient", "radial-gradient()")}}函数产生。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;Radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('radial-gradient', 240, 80)}}</p>
+</div>
+
+<div id="repeating-gradient">
+<h4 id="重复渐变">重复渐变</h4>
+
+<p>重复多次渐变图案直到足够填满指定元素。由 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}和{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}函数产生。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="linear-repeat"&gt;Repeating linear gradient&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="radial-repeat"&gt;Repeating radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}</pre>
+
+<p>{{EmbedLiveSample('repeating-gradient', 220, 180)}}</p>
+</div>
+
+<h2 id="插值">插值</h2>
+
+<p>与其他的颜色插值一样，颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent keyword</a>时，敬请注意一些没有使用这种计算方式的旧浏览器。）</p>
+
+<h2 id="规格"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>规格</strong></span></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>规格</th>
+   <th>状态</th>
+   <th>评价</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>浏览器兼容性</strong></span></font></h2>
+
+<p>每一种渐变都有不同的兼容性，敬请查阅特定渐变的相关文献与资料以获取更多信息。</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">Using CSS gradients</a>,</li>
+ <li>渐变方程：{{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}};</li>
+</ul>
+
+<p> </p>