DevShelf

Appearance

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-outside: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");

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

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

值 ​

  • 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() 之一创建的形状计算的，或者添加在 2 级规范 path() 。如果还提供了 <shape-box> ，则它定义 <basic-shape> 函数的引用框。否则，引用框默认为 margin-box 。
  • <image> 根据 shape-image-threshold 定义的指定 <image> 的 Alpha 通道提取和计算浮动区域。