initial commit

1 files changed, 184 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/shape-outside/index.html b/files/zh-cn/web/css/shape-outside/index.html
new file mode 100644
index 0000000000..57dc0676ac
--- /dev/null
+++ b/files/zh-cn/web/css/shape-outside/index.html
@@ -0,0 +1,184 @@
+---
+title: shape-outside
+slug: Web/CSS/shape-outside
+tags:
+  - CSS
+  - CSS Shapes
+translation_of: Web/CSS/shape-outside
+---
+<div>{{CSSRef}}</div>
+
+<div><strong><code>shape-outside</code></strong>的<a href="/en-US/docs/Web/CSS">CSS</a> 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; <code>shape-outside</code>提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。</div>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div>
+
+<p> </p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css no-line-numbers">/* 关键字值 */
+shape-outside: none;
+shape-outside: margin-box;
+shape-outside: content-box;
+shape-outside: border-box;
+shape-outside: padding-box;
+
+/* 函数值 */
+shape-outside: circle();
+shape-outside: ellipse();
+shape-outside: inset(10px 10px 10px 10px);
+shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
+
+/* &lt;url&gt; 值 */
+shape-outside: url(image.png);
+
+/* 渐变值 */
+shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
+
+/* 全局值 */
+shape-outside: initial;
+shape-outside: inherit;
+shape-outside: unset;
+</pre>
+
+<p><code>shape-outside</code> 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。</p>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的margin box。</dd>
+ <dt><code>&lt;shape-box&gt;</code></dt>
+ <dd>根据浮动元素的边缘（通过 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">CSS box model</a> 来定义）形状计算出浮动的区域。可能是 <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code>, 或者 <code>content-box</code>。这个形状包括了由 {{cssxref("border-radius")}} 属性制造出来的弧度（与 {{cssxref("background-clip")}} 的表现类似）。</dd>
+ <dd>
+ <dl>
+  <dt><code>margin-box</code></dt>
+  <dd><span style="line-height: 1.5;">定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的{{cssxref("border-radius")}} 和{{cssxref("margin")}} 的值决定。如果 <code>border-radius / margin</code> </span>的比率大于等于 <code>1</code> , 那么这个 margin box 的角的弧度就是 <code>border-radius + margin</code> ；如果比率小于 <code>1</code>，那么这个 margin box 的角的弧度就是 <code>border-radius + (margin * (1 + (ratio-1)^3))</code> 。</dd>
+  <dt><code>border-box</code></dt>
+  <dd>
+  <p>定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。</p>
+  </dd>
+  <dt><code>padding-box</code></dt>
+  <dd>
+  <p>定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。</p>
+  </dd>
+  <dt><code>content-box</code></dt>
+  <dd>
+  <p>定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被padding包裹的区域，在chrome控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 <code>0</code> 或 <code>border-radius - border-width - padding</code> 中的较大值。</p>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{cssxref("&lt;basic-shape&gt;")}}</dt>
+ <dd>基于 <code><a href="/en-US/docs/Web/CSS/basic-shape#inset()">inset()</a></code>， <code><a href="/en-US/docs/Web/CSS/basic-shape#circle()">circle()</a></code>， <code><a href="/en-US/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>， 或者 <code><a href="/en-US/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>其中一个创造出来的形状计算出浮动区域。如果同时存在 <code>&lt;shape-box&gt;</code> ，那么会为 <code>&lt;basic-shape&gt;</code> 方法定义一个参考盒，这个参考盒默认为 <code>margin-box</code> 。</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>提取并且计算指定 {{cssxref("&lt;image&gt;")}} 的alpha通道得出浮动区域（译者：即根据图片的非透明区域进行包裹）。就跟通过 {{cssxref("shape-image-threshold")}}来定义一样。</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> {{glossary("User agent", "用户代理")}} 必须使用由HTML5规范定义的CORS-enabled fetch方法来处理 <code>shape-outside</code> 的值中的所有URL。当捕获的时候，用户代理必须使用“匿名”模式来设置层叠样式表的URL的 referrer source 和设置所在文档的URL的 origin 。如果这导致出现没有有效的备份图像这样的网络错误， 产生的影响就跟指定了值 <code>none</code> 一样。</div>
+ </dd>
+</dl>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="插值">插值</h2>
+
+<p>当在两个  <code>&lt;basic-shape&gt;</code> 之间产生动画时，将会应用以下规则。shape 里的值将会被当成一个简单列表插入。插入列表的值的类型可能是 {{cssxref("&lt;length&gt;")}}，{{cssxref("&lt;percentage&gt;")}}，或 {{cssxref("calc")}}。如果列表的值不是以上的几种类型，但是都相同的话（如在两个列表的相同位置找到了 <code>nonzero</code> ），那些值会插入到列表中。</p>
+
+<ul>
+ <li>两个形状必须使用同样的参考盒。</li>
+ <li>如果两个形状都是 <code>ellipse()</code> 或 <code>circle()</code>类型，并且它们的 radii 都没有使用 <code>closest-side</code> 或 <code>farthest-side</code> 关键字，则将两个形状对应值之间的值插入到 shape 方法中。</li>
+ <li>如果两个形状的类型都是 <code>inset()</code>，则将两个形状对应值之间的值插入到 shape 方法中。</li>
+ <li>如果两个形状都是 <code>polygon()</code>， 两个多边形之间有相同的定点数量并且 <code>&lt;fill-rule&gt;</code> 相同，则将两个形状对应值之间的值插入到 shape 方法中。</li>
+ <li>其余所有情况都不会发生插入。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div class="left"&gt;&lt;/div&gt;
+  &lt;div class="right"&gt;&lt;/div&gt;
+  &lt;p&gt;
+    Sometimes a web page's text content appears to be
+    funneling your attention towards a spot on the page
+    to drive you to follow a particular link. Sometimes
+    you don't notice.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13,14,21,22]">.main {
+  width: 500px;
+}
+
+.left,
+.right {
+  width: 40%;
+  height: 12ex;
+  background-color: lightgray;
+}
+
+.left {
+  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  float: left;
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  float: right;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+  text-align: center;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('示例', 520, 130)}}</p>
+
+<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('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{Compat("css.properties.shape-outside")}}</div>
+
+<p> </p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+</ul>