path: root/files/zh-cn/web/css/shape-outside/index.html

---
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>