initial commit

3 files changed, 317 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/css_shapes/from_box_values/index.html b/files/zh-cn/web/css/css_shapes/from_box_values/index.html
new file mode 100644
index 0000000000..cda6ab71c7
--- /dev/null
+++ b/files/zh-cn/web/css/css_shapes/from_box_values/index.html
@@ -0,0 +1,83 @@
+---
+title: Shapes from box values
+slug: Web/CSS/CSS_Shapes/From_box_values
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<div>A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this.
+<p id="content">创建形状的一个简单方法是使用CSS框模型中的值。本文将解释如何执行此操作</p>
+
+<p><br>
+ The <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">box values</a> allowable as a shape value are:<br>
+ 允许作为形状值的框值为：</p>
+</div>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>The <code>border-radius</code> values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.<br>
+ 还支持边框半径值，这意味着您的页面中可以有带曲线边框的内容，并且您的形状可以跟随创建的形状。</p>
+
+<h2 id="CSS_box_model">CSS box model</h2>
+
+<p>The values listed above correspond to the various parts of the CSS Box Model. A box in CSS has content, padding, border, and margin.<br>
+ 上面列出的值对应于CSS方框模型的各个部分。CSS中的框具有内容、填充、边框和边距。</p>
+
+<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.<br>
+ 通过对形状使用框值，我们可以将内容环绕在这些值定义的边上。在下面的所有示例中，我都使用了一个元素，该元素具有填充、边框和边界，以便您可以看到内容的不同流动方式。</p>
+
+<h3 id="margin-box">margin-box</h3>
+
+<p>The <code>margin-box</code> is the shape defined by the outside margin edge and includes the corner radius of the shape, should {{cssxref("border-radius")}} have been used in defining the element.<br>
+ 边界框是由外部边界边定义的形状，包括形状的角半径（如果边界半径已用于定义元素）。</p>
+
+<p>In the example below, we have a circular purple item which is a {{htmlelement("div")}} with a height, width, and background colour. The <code>border-radius</code> property has been used to create a circle by setting <code>border-radius: 50%</code>. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it.<br>
+ 在下面的示例中，我们有一个圆形的紫色项，它是一个带有高度、宽度和背景色的&lt;div&gt;项。border radius属性已用于通过设置border radius:50%创建圆。由于元素有一个边距，您可以看到内容围绕圆形流动，并且应用于圆形的边距。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box">border-box</h3>
+
+<p>The <code>border-box</code> value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case it will be the same as <code>padding-box</code>, the shape defined by the outside padding edge.<br>
+ 边框值是由外部边框边缘定义的形状。此形状遵循边框外部的所有常规边框半径形状规则。即使没有使用css border属性，您仍然有边框。在这种情况下，它将与由外部填充边定义的形状padding box相同。</p>
+
+<p>In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it.<br>
+ 在下面的示例中，您可以看到文本现在是如何遵循由边框创建的行的。更改边框大小和内容。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box">padding-box</h3>
+
+<p>The <code>padding-box</code> value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then <code>padding-box</code> is the same as <code>content-box</code>.<br>
+ 填充框值定义由外部填充边缘包围的形状。此形状遵循边框内部的所有常规边框半径形状规则。如果没有填充，则填充框与内容框相同。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box">content-box</h3>
+
+<p>The <code>content-box</code> value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here.<br>
+ 内容框值定义由外部内容边缘包围的形状。此框的每个角半径都是0或border radius-border width-padding中的较大值。这意味着这里不可能有负值。</p>
+
+
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<h2 id="When_to_use_the_box_values">When to use the box values</h2>
+
+<p>Using box values is a simple way to create shapes, however this is by nature only going to work with very simple shapes that can be defined using the well-supported <code>border-radius</code> property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it.<br>
+ 使用框值是创建形状的一种简单方法，但这本质上只适用于可以使用受良好支持的border radius属性定义的非常简单的形状。上面显示的示例显示了一个这样的用例。可以使用边框半径创建圆形，然后围绕它弯曲文本。</p>
+
+<p>You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text.<br>
+ 不过，您可以使用这个简单的技术来创建一些有趣的效果。在本节的最后一个示例中，我将左右浮动两个元素，使每个元素在最接近文本的方向上具有100%的边框半径。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>For more complex shapes you will need to use one of the <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shapes</a> as a value, or define your Shape from an image as covered in other guides in this section.<br>
+ 对于更复杂的形状，您需要使用其中一个基本形状作为值，或者根据本节其他指南中介绍的图像定义形状。</p>
diff --git a/files/zh-cn/web/css/css_shapes/index.html b/files/zh-cn/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..08df50f95b
--- /dev/null
+++ b/files/zh-cn/web/css/css_shapes/index.html
@@ -0,0 +1,112 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS Regions
+  - CSS Shapes
+  - CSS3 Shapes & CSS3 Regions
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Shapes</strong>  是一个 CSS 模块，用于定义在 CSS 值中使用的几何形状。</p>
+
+<div class="note">
+<h3 id="CSS3_Shapes_CSS3_Regions">CSS3 Shapes &amp; CSS3 Regions</h3>
+
+<p><a href="https://www.w3.org/TR/css-shapes-1/" rel="nofollow">https://www.w3.org/TR/css-shapes-1/</a><br>
+ <a href="https://www.w3.org/TR/css-regions-1/" rel="nofollow">https://www.w3.org/TR/css-regions-1/</a></p>
+</div>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types">Data types</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Specifications">Specifications</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("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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</td>
+   <td>37</td>
+   <td>54</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>8.0 {{property_prefix("-webkit")}}</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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html b/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html
new file mode 100644
index 0000000000..c0e5f2706a
--- /dev/null
+++ b/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html
@@ -0,0 +1,122 @@
+---
+title: CSS的图形（Shape）概览
+slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1 Specification</a> 在CSS中描述了几何图形的shape（以下叫做形状）。在“Level 1 of the specification”中定义的形状被设计用来绘制浮动的元素。这篇文章提供关于“你能如何绘制这些形状”的概览。 </p>
+
+<p>举个例子：你在左侧设计一个浮动元素，它可以令文本环绕于该浮动元素的右侧和底部，并且以一种矩形的样式。如果你接着指定一个圆形的样式，文本就会以圆形的样式环绕。.</p>
+
+<p>事实上，我们有多种方式去创建这类形状，并且我们在指导中将会发现CSS形状是怎么工作的，然后就可以跟着感觉走了。</p>
+
+<h2 id="Specification定义了什么">Specification定义了什么?</h2>
+
+<p>Specification定义了三种新的权限：</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} — 允许定义基本形状。</li>
+ <li>{{cssxref("shape-image-threshold")}} — 设定一个渗出阈值。如果一幅图像被用于定义形状，那么只有在大于等于渗出阈值的部分才会显示，其他部分不会显示出来。.</li>
+ <li>{{cssxref("shape-margin")}} — 在形状外面加上边框。</li>
+</ul>
+
+<h2 id="定义基本的形状">定义基本的形状</h2>
+
+<p><code>shape-outside</code> 权限允许定义一个形状，它需要很多参数共同定义而成，这些参数被定义在 {{cssxref("&lt;basic-shape&gt;")}} 数据类型中。下面是一个小例子。</p>
+
+<p>下面的例子中，左侧有一幅浮动的图像，然后使用<code>shape-outside</code> 权限定义一个<code>circle(50%)</code>属性。结果为文字环绕于图像，并且图像不显示为矩形，而显示为圆形。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>正如这个级别的元素必须被浮动化才能适用<code>&lt;basic-shape&gt;</code> 一样，有时候在创建依赖时就会发生副作用。如果在浏览器中不支持形状，那么用户就会看到文本围绕在矩形的图片周围。有了形状支持之后，视觉效果就增强了。</p>
+
+<h3 id="基本形状">基本形状</h3>
+
+<p><code>circle(50%)</code> 属性是一个基本形状的例子。它定义了四个 <code>&lt;basic-shape&gt;</code> 函数，分别是：</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p>使用 <code>inset()</code> 修饰文本围绕效果时，你还可以增加偏移量 ，否则就会出现文本过于接近目标对象的情况。</p>
+
+<p>我们已经看到了 <code>circle()</code> 如何创建圆形形状。 <code>ellipse()</code> 则用来创建椭圆形形状。如果还有特殊要求，使用 <code>polygon()</code> 可以创建任意难度的形状。</p>
+
+<p>在我们的 <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Guide to Basic Shapes</a> 中，我们探索每一种形状，并且学会如何创建它们。</p>
+
+<h3 id="含有Box参数的形状">含有Box参数的形状</h3>
+
+<p>形状可以加上Box参数，因此你可以创建形状在：</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>当中。</p>
+
+<p>在下面的例子中你可以改变 <code>border-box</code> 参数，然后查看形状靠近或者远离Box的效果。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>详见 <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes From Box Values</a>。</p>
+
+<h3 id="由Image创建的形状">由Image创建的形状</h3>
+
+<p>有意思的是，可以使用带有Alpha通道的图像来创建（形状的）路径——文本将会围绕不透明的图像部分。这个特性允许文本覆盖图像，有时候可以将文本围绕于一幅不可见的图像，达到一种多边形文本显示的效果。</p>
+
+<p>需要注意的是，这种方式必须是 <a href="/en-US/docs/Web/HTTP/CORS">CORS compatible</a> 的， 否则 <code>shape-outside</code> 相当于 <code>none</code> ，你将不会得到任何形状。</p>
+
+<p>在下面的例子中，我们有一幅全透明的图像，使用如下 URL ，并且指定 <code>shape-outside</code>. 属性，创建出一个模糊的形状：一幅气球图像。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p><code>shape-image-threshold</code> 属性用于设定图像透明度的阈值并用来创建形状。 如果<code>shape-image-threshold</code> 是 <code>0.0</code> (缺省值) ，那么图像必须是全透明的。如果是 <code>1.0</code> 那么图像必须是模糊的。 中间的值就代表了区分图像哪部分透明的阈值，以创建形状。</p>
+
+<p>如果我们使用图像来创建形状，那么你可以看到阈值在起作用。在这么多例子中，如果你改变了阈值大小，形状会随之变化。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>下面我们进入更深层次的<a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a>学习.</p>
+
+<h2 id="shape-margin_属性"><code>shape-margin</code> 属性</h2>
+
+<p> {{cssxref("shape-margin")}} 属性在 <code>shape-outside</code>.周围加上边框。它使得文本的Box形状更短了，而且远离了形状本身。</p>
+
+<p>在下面的例子中，我们在基本形状中加入了 <code>shape-margin</code> 属性。改变边框的宽度可以将文本的距离增大。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="将创建的元素作为浮动元素">将创建的元素作为浮动元素</h2>
+
+<p>在上面的例子中，我们使用图像或者可见元素创建形状，意思是你可以在网页上看到这些图形。或者，你也可以只创建图形（而使图形不可见），这就需要一个浮动元素，在浮动元素的基础上就可以使图形不可见。 它可以是插入到文档中的冗余元素，可以是空的{{htmlelement("div")}} 或者 {{htmlelement("span")}} ，但是我们建议用创建好的内容。这就意味着我们可以保留CSS中的样式。</p>
+
+<p>在下面的例子中，我们在创建好的内容中插入一个宽高为150px的内容。然后，我们可以使用基本基本形状，Box参数甚至是Alpha通道去创建图形，使得文本可以环绕这个图形。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="和clip-path的关系">和<code>clip-path</code>的关系</h2>
+
+<p>基本图形和Box参数被用来创建图形时，和 {{cssxref("clip-path")}} 参数是等效的。所以如果你想要用图像创建形状的同时剪去部分图像，你可以用如下参数：</p>
+
+<p>下面的图像是一个蓝色背景的方形图像，使用 <code>shape-outside: ellipse(40% 50%);</code> 和 <code>clip-path: ellipse(40% 50%);</code> 参数去剪去相同的区域，这个区域被定义为形状。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="形状的开发工具">形状的开发工具</h2>
+
+<p>和CSS 形状的开发工具类似，Firefox在Firefox DevTools中自带 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shape Path Editor</a> 开发工具。这个工具让你可以查看网页中的任意形状，甚至可以实时显示改变形状之后的效果。如果你的多边形不正确，你可以用 Shapes Editor 调节，然后复制粘贴到CSS中。</p>
+
+<p>在Firefox 60当中，对于含有 <code>clip-path</code>的属性的元素默认启用Shape Path Editor。你也可以编辑 含有 <code>shape-outside</code> 的属性的元素，但前提是开启<code>layout.css.shape-outside.enabled</code> 首选项。</p>
+
+<h2 id="未来的CSS形状特性">未来的CSS形状特性</h2>
+
+<p>形状初始化包括了一个 <code>shape-inside</code> 属性，用来在元素中创建形状。这个属性有可能在非浮动元素中创建形状，被移动到了 <a href="https://drafts.csswg.org/css-shapes-2/">level 2</a> 规则中。由于 <code>shape-inside</code> 以前属于Level 1规则，你或许可以在网上查到它的详细信息和属性。</p>