initial commit

3 files changed, 355 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..0a43587fc3
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS Backgrounds and Borders
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - NeedsTranslation
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Backgrounds and Borders</strong> 是CSS的一个模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，剪裁或调整大小，以及以其他方式修改。边框可以用线条或图像装饰，并制成方形或圆形。此外，元素框可以用阴影装饰。</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_属性">CSS 属性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<h2 id="工具">工具</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></dt>
+ <dd>Explains how to set one or more backgrounds on an element.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the size and repeating behavior of background images.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt>
+ <dd>An overview of how CSS color can be used in HTML, including for borders.</dd>
+ <dt><a href="/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">Border-image 生成器</a></dt>
+ <dd>此交互式工具让你以可视化方式创建边框图像（{{cssxref("border-image")}} 属性）。</dd>
+ <dt><a href="/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">Border-radius 生成器</a></dt>
+ <dd>此交互式工具让你以可视化方式创建圆角（{{cssxref("border-radius")}} 属性）。</dd>
+ <dt><a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow 生成器</a></dt>
+ <dd>此交互式工具让你以可视化方式创建元素身后的阴影（{{cssxref("box-shadow")}} 属性）。</dd>
+</dl>
+
+<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 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</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</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..2873b2878c
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,129 @@
+---
+title: Scaling background images
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">CSS属性{{ cssxref("background-size") }} 可以用于调整背景图片的宽和高，因背景图片布局的默认行为是根据其原尺寸平铺，所以{{ cssxref("background-size") }}可修改其默认行为。你可以根据需要放大或缩小图片。</span></p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Tiling a large image</h2>
+
+<p>Let's consider a large image, a 2982x2808 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed <code>background-size</code> value of 150 pixels.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="tiledBackground"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;  highlight:[3]">.tiledBackground {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}</p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">Stretching an image</h2>
+
+<p>You can also specify both the horizontal and vertical sizes of the image, like this:</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>The result looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">Scaling an image up</h2>
+
+<p>On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32x32 pixel favicon to 300x300 pixels:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>As you can see, the CSS is actually essentially identical, save the name of the image file.</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Special values: "contain" and "cover"</h2>
+
+<p>Besides {{cssxref("&lt;length&gt;")}} values, the {{ cssxref("background-size") }} CSS property offers two special size values, <code>contain</code> and <code>cover</code>. Let's take a look at these.</p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p>The <code>contain</code> value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Try resizing this element!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.bgSizeContain {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{ EmbedLiveSample('contain', 250, 250) }}</p>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p>The <code>cover</code> value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Try resizing this element!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.bgSizeCover {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="Result_3">Result</h4>
+
+<p>{{ EmbedLiveSample('cover', 250, 250) }}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+ <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li>
+</ul>
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..37b2f2239b
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
@@ -0,0 +1,61 @@
+---
+title: 多个背景的应用
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+tags:
+  - CSS
+  - CSS 背景
+  - 参考
+  - 实例
+  - 指导
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">你可以应用多个背景到元素， 这些背景在你添加的第一个背景的上方和最后一个背景的下方分层叠加，</span>只有最后的背景可以包含背景颜色。</p>
+
+<p>指定多个背景很简单：</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>除了{{ cssxref("background-color") }}之外，你可以用简写{{ cssxref("background") }} 属性和它的各个属性来做到这一点。 也就是说，以下背景属性可以被指定为一个列表，每个背景一个： {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="实例">实例</h2>
+
+<p>在这个例子中，三个背景叠加在一起：Firefox标志，气泡图像和线性渐变：</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi-bg-example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}</pre>
+
+<h3 id="结论">结论</h3>
+
+<p>（如果在CodePen中图像没有出现，点击CSS模块的TIdy按钮）</p>
+
+<p>{{EmbedLiveSample('Example','600','400')}}</p>
+
+<p>正如您在这里看到的，Firefox徽标（在{{ cssxref("background-image") }}中首先列出）位于气泡图形正上方，接着是位于所有先前“images”下方的渐变（最后列出）。每个后续的子属性（{{ cssxref("background-repeat") }}和{{ cssxref("background-position") }}）适用于相应的背景。因此，background-repeat的第一个列出的值适用于第一个（最前面的）背景，依此类推。</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li>
+</ul>