1. Web
  2. CSS
  3. shape-outside

shape-outside

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

* 此特性的某些部分可能存在不同级别的支持。

shape-outside CSS 属性定义了一个形状（可以是任意非矩形形状），相邻的行内内容将围绕这个形状进行环绕。默认情况下，行内内容会围绕其外边距框进行环绕；shape-outside 提供了一种自定义环绕方式的方法，使得文本可以围绕复杂对象而不是矩形框进行环绕。

试一试

shape-outside: circle(50%);

shape-outside: ellipse(130px 140px at 20% 20%);

shape-outside: url("/shared-assets/images/examples/round-balloon.png");

shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/round-balloon.png"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

语法

css
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* <url> value */
shape-outside: url("image.png");

/* <gradient> value */
shape-outside: linear-gradient(45deg, white 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

shape-outside 属性使用以下列表中定义的值来指定，这些值定义了浮动元素的浮动区域。浮动区域决定了行内内容（浮动元素）环绕的形状。

值

none

浮动区域不受影响。行内内容像往常一样围绕元素的外边距框进行环绕。

<shape-box>

浮动区域根据浮动元素的边缘形状计算（由 CSS 盒模型定义）。这可以是 margin-box、border-box、padding-box 或 content-box。形状包括由 border-radius 属性创建的任何曲率（其行为类似于 background-clip）。

margin-box

定义由外部外边距边缘包围的形状。此形状的圆角由相应的 border-radius 和 margin 值确定。如果 border-radius / margin 比率是 1 或更大，则外边距框圆角半径是 border-radius + margin。如果比率小于 1，则外边距框圆角半径是 border-radius + (margin * (1 + (ratio - 1) ^ 3))。

border-box

定义由外部边框边缘包围的形状。该形状遵循正常的边框外部圆角成形规则。

padding-box

定义由外部内边距边缘包围的形状。该形状遵循正常的边框内部圆角成形规则。

content-box

定义由外部内容边缘包围的形状。此框的每个圆角半径都是 0 或 border-radius - border-width - padding 中的较大者。

<basic-shape>

浮动区域根据由 inset()、circle()、ellipse() 或 polygon() 函数创建的形状进行计算；其他 <basic-shape> 函数无效。如果还提供了 <shape-box>，它将定义 <basic-shape> 函数的参考框。否则，参考框默认为 margin-box。

<image>

浮动区域根据指定的 <image> 的 alpha 通道进行提取和计算，如 shape-image-threshold 所定义。

注意：如果图像无效，其效果等同于指定了关键词 none。此外，图像必须使用允许其使用的 CORS 头部提供。

正式定义

初始值none
应用于浮动
继承性否
计算值如 <basic-shape> 所定义（如果提供，后面跟着 shape-box），<image> 的 URI 变为绝对路径，否则按指定。
动画类型是，如 <basic-shape> 所指定，否则否

正式语法

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>     |
  margin-box       |
  half-border-box  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

文本汇聚

HTML

html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    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.
  </p>
</div>

CSS

css
.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

结果

规范

规范
CSS Shapes Module Level 1
# shape-outside-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容问题
© . Content available under a Creative Commons license.