shape-outside

**shape-outside** CSS 属性定义了一个形状（可能是非矩形的），相邻的内联内容应围绕该形状进行换行。默认情况下，内联内容围绕其外边距框进行换行；shape-outside 提供了一种自定义此换行的方式，可以围绕复杂对象而不是简单的盒子换行文本。

试一试

语法

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, #fff 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    

<image> = 
  <url>       |
  <gradient>  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

引导文本

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 形状模块级别 1
# shape-outside-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅