initial commit

1 files changed, 123 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html
new file mode 100644
index 0000000000..135715233f
--- /dev/null
+++ b/files/zh-cn/web/css/shape-image-threshold/index.html
@@ -0,0 +1,123 @@
+---
+title: shape-image-threshold
+slug: Web/CSS/shape-image-threshold
+tags:
+  - CSS
+  - CSS Shapes
+  - Float Area
+  - Opacity
+  - Reference
+  - shape-image-threshold
+translation_of: Web/CSS/shape-image-threshold
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> 属性 <strong><code>shape-image-threshold</code></strong> 通过设定一个alpha通道的界限值来提取{{cssxref("shape-outside")}} 值为图像的形状。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+
+
+
+<p>所有alpha值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为<code>0.5</code>时，形状会包含所有不透明度超过50%的像素。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; value */
+shape-image-threshold: 0.7;
+
+/* Global values */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;alpha-value&gt;")}}</dt>
+ <dd>设定界限值以从图像中提取形状。形状由所有alpha值比界限值大的像素定义。在0.0（完全透明）到1.0（完全不透明）之外的值会被重置（译者：如，小于0.0的值会被重置成0.0）。</dd>
+</dl>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="范例">范例</h2>
+
+<p>这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。<code>shape-outside</code>也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+
+&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; hightlight[9]">#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}</pre>
+
+<p>在这里，形状由{{cssxref("background-image")}}创建，使用渐变而非图像文件。我们在{{cssxref("shape-outside")}}属性中使用相同的渐变图像创建形状，以此构建浮动区域。</p>
+
+<p>随后值为<code>0.2</code>的<code>shape-image-threshold</code>属性规定渐变中不透明度超过20%的像素才参与构成形状。</p>
+
+<h3 id="Result">Result</h3>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="230" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/shape-image-threshold$samples/Example?revision=1598826" width="600"></iframe></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-image-threshold-property', 'shape-image-threshold')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.shape-image-threshold")}}</p>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+</ul>