【CSS 形状 (Shapes)】

---

CSS 形状 Shapes

用于	属性名	CSS 版本
① 设置 浮动元素的 浮动区域 ( = 内联内容 环绕(浮动元素)的形状)。	shape-outside	3
❶ 浮动区域的 外边距 (搭配 shape-outside 属性) 。	shape-margin	3
❷ 根据 指定的 图像不透明值 划分浮动区域。 提取 (浮动区域的) 图像值中的 不透明值 设置 浮动区域 ( 搭配 shape-outside 属性)。	shape-image-threshold	3

---

1. CSS 形状的基本概念

• ⑴ 几何形状
  • ① CSS Shapes : 是一个 CSS 模块，用于 定义 (在 CSS 值中使用的) 几何形状。
  • ② 可用于 浮动元素: 对于 Level 1规范，可以将 CSS 形状 应用于 浮动元素。
    • ❶ 内容 环绕形状:
      • 该规范 浮动上的圆形 将使内联内容环绕圆形 而不是浮动的边框。
    • ❷ 行框的长度: 这将改变 换行文本 行框的长度。
      • 
  • ③ 涉及的属性
    • shape-image-threshold
    • shape-margin
    • shape-outside
  • ④ 涉及的数据类型
    • <basic-shape>

---

• ⑵ 形状 和 框模型(盒模型) 中的值

  • ① 环绕内容的 放置位置:

    • 通过 对形状使用 盒模型中的框值，可以围绕这些值 定义的边缘 来放置 浮动元素周围的文本内容。
    • 比如 外边距margin-box，四周环绕的内容 会在 浮动元素的外边距周围 环绕。

  • ② 适用于: 边框半径 border-radius属性 设置的 简单形状。

  • ★ 盒模型的值 ⇒ 允许的形状值 :

    • ❶ content-box / ❷ padding-box / ❸ border-box / ❹ margin-box

  • ① 内容框: content-box

    • 由 内容的外边界 围住的形状 = 内容区的部分。
      • shape-outside: content-box; (紫圆 是个浮动元素)
      • 

  • ② 内边距框: padding-box

    • 由 内边距的外边界 围住的形状 = 内边距和以内的部分。
    • 如果 元素没有内边距，那么padding-box与 content-box相同。
      • shape-outside: padding-box;
      • 

  • ③ 边框盒/框: border-box

    • 由 边框的外边界 围住的形状 = 边框和以内的部分。
    • 环绕文本，绕着 元素的边框外围。
      • shape-outside: border-box;
      • 

  • ④ 外边距框: margin-box

    • 由 外边距的外边界 围住的形状 = 外边距和以内的部分。
    • 外围的文本，环绕在浮动元素的 外边距周围。
      • shape-outside: margin-box;
      • 

  • 上方的值 ⇒ 对应于 CSS 盒模型的各个部分。

    • CSS 中的框 包含内容、内边距、边框和外边距。
    • 

---

2. < basic-shape > 数据类型: CSS 属性中 使用的形状值 / 形状函数

• ⑴ 形状 数据类型:
  • ① 形状: 表示 CSS 属性中 使用的形状，<basic-shape >基础形状 数据类型。
  • ② 适用属性: ❶ clip-path, ❷ shape-outside, ❸ offset-path 属性。

---

• ⑵ 形状函数: ⇒ <basic-shape>数据类型
  • <basic-shape>数据类型 是使用 基本形状函数 之一定义的。
• ⑶ 形状 和 坐标系
  • ① 默认参考框: ⇒ 外边距框 margin-box
    • ❶ 创建形状时，使用了<basic-shape>值 的属性 就会定义一个 相关的 参考框(reference box)。
      • 使用基本形状时，默认使用的参考框是 外边距框 margin-box。
    • ❷ 参考框 的更改:
      • 可以在基本形状定义之后 添加各种框值，使用 盒模型的不同部分 来更改。
      • shape-outside: circle(50%) border-box;
  • ② 形状的 坐标系的原点: ⇒ 左上角
    • 在参考框的 左上角。
  • ③ 正方向: ⇒ 右下方
    • 该坐标轴的 x轴正方向为右、y轴的正方向为 下。
  • ④ 百分比值的长度: 都是从参考框的使用尺寸 解析出来的。

---

• ⑷ 形状函数 (图形函数 = Shape functions)
  • 形状函数⇒ <basic-shape>值
    • 支持 以下形状。所有 <basic-shape>值 都使用 函数表示，并在这里使用 值定义语法 进行定义。
    • ❶ 内嵌矩形: inset()
    • ❷ 圆形: circle()
    • ❸ 椭圆形: ellipse()
    • ❹ 多边形: polygon()
    • ❺ svg path 路径字符串: path()
• ⑸ 形状函数的 浏览器支持
  • 

---

Ⅰ. inset() 函数: 设置 内嵌矩形 (可设置各边偏移量 和 区域的圆角)

• inset() 函数
  • inset( <shape-arg>{1,4} [round <border-radius>]? )
• ⑴ 内嵌矩形: 定义一个 内嵌矩形。
  • ① 参数个数: 1~4个值: ⇒ 顺时针 语法
    • 参数遵循margin简写的语法，允许使用 1~4个值 设置 所有四个偏移量。
    • 长度值/百分比值: <shape-arg> = <length> | <percentage>
  • ② 4个参数:
    • 从参考框 的各边 向内的 上、右、下和左 偏移量，这些偏移量 定义了 矩形的 边缘位置。
  • ③ 区域的圆角:
    • 可选的<border-radius>参数 使用 border-radius 简写语法 为 出来的矩形 定义圆角。
    • 如果是 clip-path 就是剪切后 可见区域的圆角。
  • ④ 偏移量的值
    • 相对于: 各边的距离。
    • 偏移量相加 大于整体尺寸⇒ 无封闭区域:
    • 在任意尺寸中，一对 加起来 超过使用尺寸的 偏移量(例如，左、右 偏移量 各占75%) 定义了一个 没有封闭区域的形状。对于这个规范，这会导致一个 空的浮动区域。
    • 上下相加 =90%时 如下图,剩下10%
      • clip-path: inset(10% 10% 80% 10% round 50% 50%);
      • 
    • 等于100%时,高度完全被裁剪掉了,只剩空白。
      • clip-path: inset(10% 10% 90% 10% round 50% 50%);
      • 

---

• 示例1: 设置 剪切区域 = 可见区域
  • 偏移量之间的分隔符: 空格
  • 偏移量和圆角 分隔符: round 关键字
    • clip-path: inset(10% 10% 10px 10px round 50% 50%);

/*图片的容器*/
.imgcontainer {
    border: solid 2px lightseagreen;
    width: 50%;
    margin: 10px;
    padding: 10px;
    /*background-color: lightcyan;*/
}

/*让容器 根据浮动内容 自动调整高度*/
.imgcontainer::after {
    content: "";
    display: block;
    clear: both;
}

.pearlimg {
    border: solid 5px lightskyblue;
    margin: 10px;
    padding: 10px;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #8fffdf;

    /*浮动*/
    float: left;
    
    /*设置 剪切区域的形状*/
    clip-path: inset(0% 0% 0px 0px);/*各边都不剪切*/
    clip-path: inset(10% 10% 10px 10px); /*各边 剪切掉一部分*/
    clip-path: inset(10% 10% 10px 10px round 50% 50%); /*各边 剪切掉一部分,被剪切的区域 设置圆角,不是原来的边框设置圆角*/

}

.imgcontainer p {
    border: dotted 2px lightcoral;
}
 

• ① 各边都不剪切: clip-path: inset(0% 0% 0px 0px);
  • 
• ② 各边 剪切掉一部分
  • 
  • 
• ③ 给剪切区域 设置圆角,不是 给原来的边框 设置圆角。
  • clip-path: inset(10% 10% 10px 10px round 20px);边框半径 20px
    • 
• ④ 剪切区域 设置成 圆形/椭圆形的
  • 相当于: border-radius: 50% 50% 是不是圆形,看剪切区域 是不是正方形。
  • clip-path: inset(10% 10% 10px 10px round 50% 50%);
    • 

---

Ⅱ. circle() 函数: 圆形 (1个半径 at 一个圆心的位置)

• ⑴ circle() 函数

  • circle( [<shape-radius>]? [at <position>]? )
    • ? 是正则表达式中的特殊字符，表示 0和1，也就是说 shape-radius（圆半径）和position（圆心位置）都是可以缺省的。
  • ① 1个半径: <shape-radius> 参数
    • 代表了r， 即 圆形的半径， 负值无效。
    • 参数值 类型: <shape-radius> = <length> | <percentage> | closest-side | farthest-side
      • (圆形或椭圆形的)半径 缺省值为: closest-side。
      • 长度/百分比: 可以是长度值或百分比值。
      • 关键字: 也可以是其中一个关键词:
        • closest-side 或farthest-side⇒ 跟 圆心的位置 相关，圆心位置变化,最近端/最远端 距离大小 也会变化。
        • 最近端: closest-side : 半径为从圆心 到最近端的距离。
          • 使用 从形状中心到参考框 最近边的 长度。
        • 最远端: farthest-side: 半径为从圆心 到最远端的距离。
          • 使用 从形状中心到参考框最远边的 长度。
  • ② 1个圆心的位置:
    • <position> 参数定义了 圆心的位置(x,y)，以元素左上角 为原点。
      • 圆心的位置变化 ⇒ 区域发生变化。
      • 未设置= 盒模型的中心。
    • 圆心位置的 参数类型: ❶ 关键字(top,bottom,center,left,right 的组合值) + ❷ 长度值/百分比值。
      • 
  • ③ 百分比值:
    • 从使用的参考框的 宽度和高度 解析。
      • 将以公式 sqrt(width^2+height^2)/sqrt(2) 计算 (待讨论,存疑)
    • 其中width与height为相关 盒模型的宽与高。

• ⑵ 合格的写法

clip-path: circle();
clip-path: circle(50%);
clip-path: circle(at 50% 50%);
clip-path: circle(50% at 50% 50%);
clip-path: circle(50px at 50px 50px);
clip-path:circle(closest-side);
clip-path:circle(farthest-side);

---

.pearlimg {
    border: solid 5px lightskyblue;
    margin: 10px;
    padding: 10px;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-color: #8fffdf;
    /*浮动*/
    float: left;


    /*设置 剪切区域的形状*/
    clip-path:circle();
    clip-path:circle(at 50% 50%);
    /*clip-path:circle(50% at 50% 50%);*/
    /*clip-path:circle(60% at 50% 50%);*/
    /*clip-path:circle(100px at 50% 50%);*/
    /*clip-path:circle(100px at 70% 50%);*/
    /*clip-path:circle(40% at 60% 50%);*/
}

• 示例1: 给元素设置 圆形的剪切区域。
  • 图中的涉及的橘黄色部分 是外边距的区域,用来对比 剪切区域的位置。
• ① 原图 (宽高不相等)
  • 
• ② 默认的半径和圆心位置 (有省略值): clip-path:circle(); = clip-path:circle(at 50% 50%);
  • (圆形或椭圆形的)半径 缺省值为: closest-side = 圆心位置 到最近边的距离。
    • 
  • 
• ③ 半径为50%: clip-path:circle(50% at 50% 50%);
  • 因为 高度＜宽度，可以看到纵向上,圆看似 缺少一部分 (因为已经超出了 元素的边框之外,没有内容了)
    • 
    • 
• ④ 半径设置为60%: clip-path:circle(60% at 50% 50%);
  • 纵横方向 都不是完整的圆了,半径60%，直径已经超出100%了
    • 
    • 
• ⑤ 半径设为100px: clip-path:circle(100px at 50% 50%);
  • 
  • 
• ⑥ 改变圆心的位置 ⇒ 剪切的区域 也会发生变化。
  • clip-path:circle(100px at 70% 50%);
  • 

---

Ⅲ. ellipse() 函数: 椭圆形 (2个半径 at 1个圆心的位置)

• ⑴ ellipse(),美 /ɪˈlɪps/
  • ellipse( [<shape-radius>{2}]? [at <position>]? )
  • ① 2个半径: 横向半径+纵向半径
    • 代表了 rx与ry，其中rx代表了 x轴方向的半径，ry代表了y轴方向的半径。
    • 参数值 类型:<shape-radius> = <length> | <percentage> | closest-side | farthest-side
      • (圆形或椭圆形的)半径 缺省值为: closest-side。
      • 长度/百分比: 可以是长度值或百分比值。
      • 关键字: 也可以是 其中一个关键词 ↓
        • closest-side 或farthest-side ⇒ 跟 圆心的位置 相关，圆心位置变化,最近端/最远端 距离大小 也会变化。
        • ❶ 最近端: closest-side : 半径为从圆心 到最近端的距离。
          • 使用 从形状中心到参考框 最近边的 长度。
        • ❷ 最远端: farthest-side: 半径为从圆心 到最远端的距离。
          • 使用 从形状中心到参考框最远边的 长度。
  • ② 圆心的位置:
    • <position>参数 定义了 椭圆形 圆心的位子。
      • 其省缺值 为盒模型的中心。
      • 相对于 元素的左上角 为原点。
    • 圆心位置的 参数类型: ❶ 关键字(top,bottom,center,left,right 的组合值) + ❷ 长度值/百分比值。
      • 
  • ③ 负值: 不接受负值。
  • ④ 百分比值:
    • 把盒模型的宽与高 作为参照，宽作为 x轴半径 的参照值，高作为y轴半径的参照值。

  ---

  • ⑵ 查看生成的形状 以及形状的范围
  • clip-path: ellipse(100px 50px at 30%); = clip-path: ellipse(100px 50px at 30% 50%);
    • 圆心位置 只有一个值 = 横向位置, 纵向: 默认50%
    • 在 火狐浏览器中,点击属性旁边的形状，可以查看生成的形状。
    • 

---

    /*椭圆形*/
    clip-path: ellipse(100px 100px);
    /*clip-path: ellipse(100px 50px);*/
    /*clip-path: ellipse(100px 50px at 30%);!*圆心位置 只有一个,就是 横向位置,纵向默认50%*!*/
    /*clip-path: ellipse(100px 50px at 30% 50%);*/
    /*clip-path: ellipse(100px 50px at 30% 70%);*/
    /*clip-path: ellipse(closest-side closest-side at 50% 50%);*/
    /*clip-path: ellipse(farthest-side farthest-side at 50% 50%);*/
    /*clip-path: ellipse(closest-side closest-side at 30% 70%);*/
    /*clip-path: ellipse(farthest-side farthest-side at 30% 70%);*/

• 示例1: 给 图片裁剪成 椭圆形

  • 橘黄色的部分，是外边距的区域，用来 对比 相对位置的。
    • 半径之间的分隔符: 空格
    • 半径和圆心的分隔符: at

• ① 椭圆函数 ，也能设置圆形⇒ 横向半径 = 纵向半径

  • clip-path: ellipse(100px 100px);= clip-path: ellipse(100px 100px at 50% 50%);
  • 圆心位置: 默认在正中心j。
    • 

• ② 两个半径 不等的椭圆: clip-path: ellipse(100px 50px);

  • 

• ③ 圆心位置 只设置一个值 = 横向位置

  • clip-path: ellipse(100px 50px at 30%); = clip-path: ellipse(100px 50px at 30% 50%);
  • 圆心位置 只有一个值 = 横向位置, 纵向: 默认50%
    • 在 火狐浏览器中,点击属性旁边的形状，可以查看生成的形状。
    • 
    • 

• ④ 改变 圆心的位置

  • clip-path: ellipse(100px 50px at 30% 70%);
    • 

• ⑤ 使用最近端 关键字

  • clip-path: ellipse(closest-side closest-side at 50% 50%); = clip-path: ellipse(farthest-side farthest-side at 50% 50%);
  • 圆心位置 在正中心 50% 50% 时，最近端 最远端 相同效果。
    • 

• ⑥ 设置 最近端，改变圆心的位置

  • clip-path: ellipse(closest-side closest-side at 30% 70%);
  • 圆心位置变化 ⇒ 最近端 closest-side的长度值 也变化
    • 

• ⑦ 设置最远端，改变圆心的位置

  • clip-path: ellipse(farthest-side farthest-side at 30% 70%);
  • 椭圆的形状 发生了变化⇒ 最远端是 参考 边和圆心的位置的距离。
    • 
    • 

---

Ⅳ. polygon() 函数: 多边形 顶点的坐标 值对

• ⑴ polygon() 函数，美 /ˈpɑːliɡɑːn/
  • polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
  • ① 填充规则:
    • <fill-rule> 用于确定 多边形内部的 填充规则。
    • 可选值为 非零 nonzero 和 奇偶判定 evenodd。
      • 该参数的缺省值: nonzero。
  • ② 点坐标: 一个个 多边形的 点坐标(x,y)。
    • 值对的个数: ≥ 3。多边形接受 3个或多个 值对(一个多边形 至少必须绘制一个三角形 = 至少 3个点)。
      • 多边形 = n 边 = 至少 需要设置 n 个点坐标 (最后一个点 会和第一个点 ，自动闭合。)
    • 这些值 是根据 参考框 绘制的坐标。
  • ③ 分隔符:
    • x y一对坐标 ，x y之间 分隔符 用空格
    • 不同的 点坐标之间 ，分隔符 用 逗号 ,。

---

• (存疑: 在多边形中设置 填充规则 ，似乎并没有用,仅限 svg 吗?)
• ⑵ 填充规则: fill-rule 属性 提供两种选项用于指定如何 判断图形的“内部”

  • ① nonzero非零 ⇒ 点在 图形内部。

    • 射线和交点:
      • 按照规则，要判断一个点 是否在图形内，从该点 作任意方向的一条射线，然后检测 射线与图形路径的 交点情况。
    • 加减法:
      • 从0开始计数，路径 ❶ 从左向右 穿过射线则 计数 ❷ 加1
      • ❶ 从右向左 穿过射线则 计数 ❷ 减1。
      • 得出 计数结果后，如果结果是 0，则认为 点在图形外部，否则认为 在内部。
    • 

  • ② 奇偶 evenodd ⇒ 奇数 在内部。

    • 射线和交点数量:
      • 按照规则，要判断一个点是否在图形内，该点 作任意方向的一条射线，然后检测 射线与图形路径的 交点的数量。
    • 奇偶数和内外
      • 如果结果是 ❶ 奇数则认为点在 ❷ 内部。
      • 是 ❶ 偶数 则认为点在 ❷ 外部。
      • 

---

• 示例1: 把图片 剪切成 各种多边形
  • 多边形 = n 边 = 至少 需要设置 n 个点坐标 (最后一个点 会和第一个点 ，自动闭合。)

    /*多边形*/
    clip-path: polygon(100px 10px , 200px  100px, 0px 100px); /*三个点坐标 = 三角形*/
    clip-path: polygon(100px 10px , 200px  100px, 0px 100px,100px 200px); /*因为点的路线，四个点 = 两个相连的三角形*/
    /*clip-path: polygon(evenodd, 100px 10px , 200px 100px,100px 200px, 0px 100px);*/
    clip-path: polygon(100px 10px , 200px 100px,100px 200px, 0px 100px); /*四个点 = 四边形*/

• ① 三个点坐标 = 三角形
• clip-path: polygon(100px 10px , 200px 100px, 0px 100px);
  • 
• ② 四个点 = 四边形
  • clip-path: polygon(100px 10px , 200px 100px,100px 200px, 0px 100px);
  • 
• ③ 四个点 = 两个相连的三角形⇒ 因为点的路线 先后顺序不同 ⇒ 形状不同
  • clip-path: polygon(100px 10px , 200px 100px, 0px 100px,100px 200px);
  • 

---

Ⅴ. path() 函数: svg path 路径字符串

• path() 函数
  • path( [<fill-rule>,]? <string>)
  • ① 填充规则
    • 可选的 <fill-rule> = 用于确定 路径内部的 填充规则 (filling rule)。
    • 可选 nonzero （非零环绕规则）和 evenodd （奇偶规则） .
    • 缺省默认值: nonzero.
  • ② SVG Path 字符串: 参数 <string>是用 引号包含的 SVG Path 字符串。

---

3. shape-outside 属性: 设置 浮动元素的 浮动区域( = 内联内容 环绕(浮动元素)的形状)

• ⑴ 设置 浮动元素的 浮动区域( = 内联内容 环绕(浮动元素)的形状): shape-outside 属性
  • ① 可指定 非矩形的形状:
    • shape-outside 的 CSS 属性设置 浮动元素的浮动区域 可以是 非矩形的形状，相邻的内联内容(inline content) 应环绕该形状 进行放置。
  • ② 默认形状:
    • 默认情况下，内联内容环绕 元素的 矩形外边距框 margin box;
  • ③ 自定义 环绕的形状: (元素周围的文本)
    • shape-outside 提供了一种 自定义环绕的方法，可以将文本环绕在 复杂对象/形状的周围而 不是简单的矩形框中。
  • ④ 适用对象: ❶ 浮动元素，浮动元素周围 才会环绕 文本。
  • ⑤ 设置 浮动元素的浮动区域⇒ 环绕形状
    • 浮动区域⇒ 决定了 内联内容 环绕(浮动元素)的形状。

---

• ⑵ 浮动区域的 语法
  • 含 常用属性值: shape-outside: none | border-box | padding-box | content-box | margin-box | <inset()> | <circle()> | <ellipse()> | <polygon()> |<url> | <gradient>;

/* 关键字值 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('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* url引用的 图像值  <url> value */
shape-outside: url(image.png);

/* 渐变- 图像值 <gradient> value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;


none | <shape-box> || <basic-shape> | <image>
where 
<shape-box> = border-box | padding-box | content-box | margin-box
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>

where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>

---

• ⑶ 浮动区域的 取值
  • ① 浮动区域: ⇒ 文本环绕形状
    • 使用下面列表中的值 指定 shape-outside属性，这些值 定义了 浮动元素的浮动区域。
  • ② 环绕形状:
    • 浮动区域⇒ 决定了 内联内容 环绕(浮动元素)的形状。

---

• ⑷ 浮动区域的 属性值
  • 默认 矩形外边距区 none / 盒模型的边界 / 函数值 / 图像值

    • Ⅰ. 环绕 矩形外边距区(默认值): none

      • 该浮动区域 不产生影响，行内元素 以默认的方式 环绕着该元素的 margin box。
      • (是矩形的,不受 边框圆角border-radius的影响)。
        • 

    • Ⅱ. 盒模型的边界: <shape-box> = ❶ margin-box, ❷ border-box, ❸ padding-box, ❹ content-box。

      • ① 浮动区域 是根据 浮动元素的 各分区的边界形状 (由CSS 框/盒模型 定义)计算的。
        • 可能值:
        • ❶ margin-box
          • 受 边框圆角border-radius的影响。
          • 和none相比，边框圆角外部的 外边距 会被占据一部分，因为 外边距区 也是随着圆角的弯曲进行的。
            • 
            • 
        • ❷ border-box
          • 受 边框圆角border-radius的影响。
          • 围绕着边框进行⇒ 但边框圆角外部的 边框会被占据一部分，因为是随着圆角的弯曲进行的。
            • 
        • ❸ padding-box
          • 受 边框圆角border-radius的影响。
          • 文本环绕 内边距区(覆盖元素的边框区了)。
            • 
        • ❹ content-box。
          • 受 边框圆角border-radius的影响。
          • 文本环绕 内容区(覆盖元素的内边距区了)。
            • 
        • ② 形状和圆角:
          • 这个形状包括了由 border-radius 属性制造出来的圆角弯曲处（与 background-clip 的表现类似）。
          • ★关键点: 边框圆角 会应用在盒模型的 各个区。
            • 边框圆角 不仅仅应用 边框区,还应用于 外边距区,内边距区,内容区 都会变成圆角的⇒ 浮动区域 都会受 边框圆角的影响。

    • Ⅲ. 形状函数: <basic-shape>

    • 基于 形状函数 其中一个创造出来的形状 计算出浮动区域。

      • ① 形状函数如下
        • ❶ inset()
          • shape-outside: inset(10px);: 刚好是外边距区的宽度 所以会向元素内 前进10px 环绕边框区 。
            • 
        • ❷ circle()
        • ❸ ellipse()
        • ❹ polygon()
      • ② 参考框/盒: 如果同时存在 <shape-box> ，那么会为 <basic-shape>形状函数的形状 方法定义一个参考盒。
        • shape-outside: inset(15px) border-box; : 改变参考框， 默认相对于 外边距区，现在 相对于边框区, 刚好是内边距区的宽度+边框区宽度 所以会向元素内 前进15px 环绕内容区。
          • 
      • ③ 参考盒默认为: 外边距框(外边距区) margin-box 。
        • 

    • Ⅳ. 图像值: <image>

      • ① 图片的 非透明区域:
        • 提取并且计算指定 图像<image>的 不透明值 alpha 通道 得出 浮动区域（即根据图片的非透明区域 进行环绕）。
          • shape-outside: url("../images/star.png");
          • 
          • 
      • ② 等同: 跟通过 shape-image-threshold来定义一样。
      • ③ 常用 图像值: <url> | <gradient>
      • ④ 其他 图像值: <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()>

---

• ⑸ 浮动区域的 浏览器支持
  • 圆心位置的 三值语法 支持度不好。
  • IE 不支持。
  • 

---

示例1: 给浮动元素 设置浮动区域。

• html

<!--CSS 形状数据类型-->
<div class="imgcontainer">
    <img alt="" src="images/OrientalPearl.jpg" class="pearlimg">

    <p>东方明珠广播电视塔（The Oriental Pearl Radio & TV
        Tower）是上海的标志性文化景观之一，位于浦东新区陆家嘴，塔高约468米。该建筑于1991年7月兴建，1995年5月投入使用，承担上海6套无线电视发射业务，地区覆盖半径80公里。
        东方明珠广播电视塔是国家首批AAAAA级旅游景区。塔内有太空舱、旋转餐厅、上海城市历史发展陈列馆等景观和设施，1995年被列入上海十大新景观之一。</p>
</div>

• css

/*图片的容器*/
.imgcontainer {
    border: solid 2px lightseagreen;
    width: 50%;
    margin: 10px;
    padding: 10px;

}

/*让容器 根据浮动内容 自动调整高度*/
.imgcontainer::after {
    content: "";
    display: block;
    clear: both;
}

.pearlimg {
    border: solid 5px lightskyblue;
    margin: 10px;
    padding: 10px;
    width: 300px;
    height: 200px;
    border-radius: 20%;
    background-color: #8fffdf;

    /*浮动*/
    float: left;

    /* 文本 环绕浮动元素的形状 */
    /*shape-outside: none;*/
    /*shape-outside: margin-box;*/
    /*shape-outside: border-box;*/
    /*shape-outside: padding-box;*/
    /*shape-outside: content-box;*/
    shape-outside: inset(10px); /*刚好是外边距区的宽度 所以会向元素内 前进10px 环绕边框区*/
    shape-outside: inset(15px); /*刚好是外边距区的宽度+边框区宽度 所以会向元素内 前进15px 环绕内边距区*/
    shape-outside: inset(15px round 20%); /*带圆角 会在圆角弯曲处外围 也有文字*/
    /*shape-outside: inset(15px) border-box; !* 改变参考框， 相对于边框区, 刚好是内边距区的宽度+边框区宽度 所以会向元素内 前进15px 环绕内容区*!*/
    /*shape-outside: circle(175px at center); !*包含外边距区的整体宽度 = 350,半径 = 350/2 = 175 ,最中间的浮动区域 会在外边距区 外部,圆是有弯曲的*!*/
    shape-outside: circle(100px at center); /*半径越小,浮动区域 越小, 环绕的文本 就越靠近 浮动元素的中心*/
    /*shape-outside: ellipse(50% 40% at center);*/
    /*shape-outside: polygon(100px 10px,200px 100px,0px 100px);*/

    /* 浮动区域 = 图像的不透明区域 */
    shape-outside: url("../images/star.png");

}

.imgcontainer p {
    border: dotted 2px lightcoral;
    color: #ff8cce;

}

• ① 刚好是外边距区的宽度+边框区宽度 所以会向元素内 前进15px 环绕内边距区 :

  • shape-outside: inset(15px);
  • 

• ② 带圆角的矩形区域 会在圆角弯曲处外围 也有文字:

  • shape-outside: inset(15px round 20%);
  • 

• ③ 圆形的 浮动区域

  • 包含外边距区的 元素整体宽度 = 350px,半径 = 350/2 = 175 ,最中间的浮动区域 会在外边距区 外部,圆是有弯曲的 shape-outside: circle(175px at center);

    • 
    • 

• ④ 半径越小,浮动区域 越小, 环绕的文本 就越靠近 浮动元素的中心。

  • shape-outside: circle(100px at center);
  • 
  • 

• ⑤ 椭圆的浮动区域

  • shape-outside: ellipse(50% 40% at center);
    • 
    • 

• ⑥ 三角形的 浮动区域

  • shape-outside: polygon(100px 10px,200px 100px,0px 100px);
  • 
  • 

• ⑦ 浮动区域 = 某图像的 不透明区域

  • shape-outside: url("../images/star.png");
    • 
    • 
    • 

---

3.1 shape-margin 属性: 浮动区域的 外边距 (搭配 shape-outside 属性)

• ⑴ 设置 浮动区域的外边距: shape-margin
  • ① 浮动区域的外边距
    • shape-margin 属性 设置使用 shape-outside 创建的CSS 浮动区域形状的 外边距。
    • 浮动区域的外边距 = 浮动区域 和 环绕文本之间的距离 ⇒ 看上去 就像 浮动区域的尺寸 变大了一样。
  • ② 适用元素: 浮动元素。

---

• ⑵ 浮动区域外边距的 语法和属性值
  • ① shape-margin: <length> | <percentage>;
  • ② 属性值: 长度值 / 百分比值;
    • 元素 包含块的宽度的 百分比。

/* 长度值 <length> values */
shape-margin: 10px;
shape-margin: 20mm;

/* 百分比值 <percentage> value */
shape-margin: 60%;

/* 全聚酯 Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

---

• ⑶ 浮动区域外边距的 浏览器支持
  • IE ，edge 浏览器 不支持。
  • Safari 需要 浏览器前缀: -webkit-
  • 

---

• 示例1: 给浮动元素的 浮动区域，设置一个 浮动区域外边距。

• ① 设置 浮动区域: shape-outside: url("../images/star.png");

  • 

• ② 浮动区域 加一个外边距 : shape-margin: 20px;

  • 可以看到浮动区域 星星的区域，就像膨胀了一样 变大了⇒ 因为 外边距是透明的，所以 浮动区域的 外边距 效果，就是 浮动区域 变大了。
    • 

• ③ 看清 浮动区域: 同时设置 剪切区域 = 浮动区域

  • 注意 剪切区域 和 浮动区域的 参考框。
  • 

    /*同时设置 剪切区域 = 浮动区域,浮动区域的外边距,这样浮动区域 就能看得很清楚 */
    clip-path: polygon(0 0, 150px 150px, 0 150px); /*默认从边框左上角开始*/
    shape-outside: polygon(0 0, 150px 150px, 0 150px) border-box; /*默认从外边距框开始，所以设置 为 从边框区开始 ⇒ 才等于 剪切区域*/
    shape-margin: 20px;

---

3.2 shape-image-threshold 属性: 提取 (浮动区域的) 图像值中的 不透明值 ( 搭配 shape-outside 属性)

• ⑴ 提取 (浮动区域的) 图像值中的 不透明值: shape-image-threshold ，美 /ˈθreʃhoʊld/ = 临界值 = 阈(yu)值
  • ① 不透明值:
    • shape-image-threshold 属性设置 提取 图像形状 ( 浮动区域 shape-outside中的图像值) 的 不透明值 通道阈值 (alpha channel threshold)
  • ② 适用元素: 浮动元素。
  • ③ 浮动区域 和 阈值/不透明值 的 关系: 浮动区域 = 不透明度 ＞ 指定阈值的部分。
    • 为了确定 其边界，其 alpha分量值 大于阈值的任何像素 都被认为是形状的一部分。
      • shape-image-threshold: .5;⇒ 值0.5表示⇒ 浮动区域 = 所有 不透明度 超过50%的像素。

---

• ⑵ 浮动区域 图像 不透明值限制 的 语法和属性值
  • ① shape-image-threshold: <number> | <percentage>
  • ② 属性值: 数字 / 百分比值;
    • ❶ 数字值: 范围0.0( = 完全透明 ) ~ 1.0( = 完全不透明)。
    • ❷ 百分比的不透明度值 支持度 很差，暂时别用。

---

• ⑶ 浮动区域 图像不透明值限制 的 浏览器支持
  • 

---

• 示例1: 设置 浮动区域的 图像的不透明临界值

<div class="imgcontainer">
<!--    <img alt="" src="images/OrientalPearl.jpg" class="pearlimg">-->
    <div class="emptybox"></div>

    <p>东方明珠广播电视塔（The Oriental Pearl Radio & TV
        Tower）是上海的标志性文化景观之一，位于浦东新区陆家嘴，塔高约468米。该建筑于1991年7月兴建，1995年5月投入使用，承担上海6套无线电视发射业务，地区覆盖半径80公里。
        东方明珠广播电视塔是国家首批AAAAA级旅游景区。塔内有太空舱、旋转餐厅、上海城市历史发展陈列馆等景观和设施，1995年被列入上海十大新景观之一。</p>
</div>

• css

/*图片的容器*/
.imgcontainer {
    border: solid 2px lightseagreen;
    width: 50%;
    margin: 10px;
    padding: 10px;

}

/*让容器 根据浮动内容 自动调整高度*/
.imgcontainer::after {
    content: "";
    display: block;
    clear: both;
}
.imgcontainer p {
    border: dotted 2px lightcoral;


}

.emptybox {
    float: left;
    height: 150px;
    width: 150px;
    /*background-color: #ff5e4e;*/
    margin: 10px;
    padding: 10px;

    border: solid 5px #00d000;
    border-radius: 10%;

    /*给空盒子 创建一个 背景图像，用以对比 浮动区域图像值 渐变的区域 (浮动区域中的图像值 是不会显示的，仅作为形状的 图像参考值)*/
    background-image: linear-gradient(45deg, rgb(255, 143, 135), transparent 80%, transparent);

    /* 设置 浮动区域和不透明值的关系   */
    /*shape-outside: circle(100px);*/
    shape-outside: linear-gradient(50deg, rgb(255, 143, 135), transparent 80%, transparent);
    /*设置 浮动区域的 不透明值的阈值/临界值*/
    shape-image-threshold: 0.2;
    shape-image-threshold: 0.4;
    shape-image-threshold: 0.6;

}

• ① 默认的渐变图的 浮动区域 (阴影处 为非浮动区 = 会被环绕文本 占据的位置)
  • 显示的图形 = 背景图像 (= 浮动区域 设置的图像 background-image = shape-outside)⇒ 用来对比的。
    • shape-outside: linear-gradient(50deg, rgb(255, 143, 135), transparent 80%, transparent);
      • 
• ② 设置 浮动区域的 图像不透明值 临界值
  • ❶ shape-image-threshold: 0.2;⇒ 图像的不透明度 大于0.2的部分 = 浮动区域
    • 阴影部分 是文本占据的地方,非阴影部分 = 浮动区域 ，被文本环绕。
    • 
  • ❷ shape-image-threshold: 0.4;⇒ 图像的不透明度 大于0.4的部分 = 浮动区域
    • 阴影部分 是文本占据的地方,非阴影部分 = 浮动区域 ，被文本环绕。
      • 
  • ❸ shape-image-threshold: 0.6;⇒ 图像的不透明度 大于0.6的部分 = 浮动区域
    • 阴影部分 是文本占据的地方,非阴影部分 = 浮动区域 ，被文本环绕。
      • 
• ③ 文本的特别排列: 当空盒子的 背景和边框 都去掉
  • 会看见文本 按照很特别的方式排列。
  • 
• ④ 生成浮动的空盒子: 可以用包含块 生成。
  • 生成一个 浮动的空盒子⇒ 改变环绕文本的 流动方式
  • 

/*生成一个 浮动的空盒子⇒ 改变环绕文本的 流动方式*/
.imgcontainer::before {
    content: "";
    float: left;
    width: 400px;
    height: 300px;
    shape-outside: linear-gradient(50deg, rgb(255, 143, 135), transparent 80%, transparent);
    shape-image-threshold: .3;
}

---

---

♣ 结束语 和 友情链接

• 参考文档
  • MDN CSS 教程
  • CSS Shapes - CSS（层叠样式表） | MDN

---

• 友情链接
  • 【CSS 颜色的 合法颜色值 (详细介绍)】
  • 【CSS 图像 image 数据类型】
  • 【CSS 单位 (详细介绍)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103509398
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！