CSS 形状 Shapes

  • CSS 形状 Shapes
    • 1. CSS 形状的基本概念
    • 2. < basic-shape > 数据类型: CSS 属性中 使用的形状值 / 形状函数
      • Ⅰ. inset() 函数: 设置 内嵌矩形 (可设置各边偏移量 和 区域的圆角)
      • Ⅱ. circle() 函数: 圆形 (1个半径 at 一个圆心的位置)
      • Ⅲ. ellipse() 函数: 椭圆形 (2个半径 at 1个圆心的位置)
      • Ⅳ. polygon() 函数: 多边形 顶点的坐标 值对
      • Ⅴ. path() 函数: svg path 路径字符串
    • 3. shape-outside 属性: 设置 浮动元素的 浮动区域( = 内联内容 环绕(浮动元素)的形状)
      • 3.1 shape-margin 属性: 浮动区域的 外边距 (搭配 shape-outside 属性)
      • 3.2 shape-image-threshold 属性: 提取 (浮动区域的) 图像值中的 不透明值 ( 搭配 shape-outside 属性)
    • ♣ 结束语 和 友情链接

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="data:images/OrientalPearl.jpg" class="pearlimg"><p>东方明珠广播电视塔（The Oriental Pearl Radio & TVTower）是上海的标志性文化景观之一，位于浦东新区陆家嘴，塔高约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="data:images/OrientalPearl.jpg" class="pearlimg">--><div class="emptybox"></div><p>东方明珠广播电视塔（The Oriental Pearl Radio & TVTower）是上海的标志性文化景观之一，位于浦东新区陆家嘴，塔高约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
    • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！

【CSS 形状 (Shapes)】相关推荐

  1. css 形状_在CSS形状之外思考

    css 形状 CSS is based off a box model. If you have an image that is a circle that you want to wrap tex ...

  2. css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等

    css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...

  3. css 形状_CSS形状简介

    css 形状 Until the introduction of CSS Shapes, it was nearly impossible to design a magazine-esque lay ...

  4. css 一侧是三角形的矩形_5种具有CSS形状和滤镜的精美图像效果

    今天,这里为大家准备了五张展示现代CSS功能的背景图像.它们可以用作桌面墙纸,引人注目的登陆页面,甚至可以用作印刷海报.在下面的文章中,还将介绍一些关键的CSS技术,以便大家可以根据自己的喜好自定义它 ...

  5. 45个值得收藏的 CSS 形状

    CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状.添加宽度和高度,就得到了所需的精确大小的矩形.添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形 ...

  6. amazing！CSS 形状

    CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状.添加宽度和高度,就得到了所需的精确大小的矩形.添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形 ...

  7. web前端入门到实战：实现CSS形状变换

    CSS3的"clip-path",这个"clip-path"看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做 ...

  8. 各种css形状 CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等

    CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等 新出的HTML5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...

  9. 【CSS 遮挡和剪切属性 Masking】

    CSS 遮挡和剪切属性 Masking CSS 遮挡和剪切属性 Masking 1. CSS Masking 的基本概念 2. clip 属性: 设置 绝对/固定 定位元素的 可见区域 (可指定 四条 ...

最新文章

  1. Python高级特性：切片、迭代、列表生成式、生成器与迭代器
  2. vc 版本 宏 （zz.IS2120@BG57IV3）
  3. c#中一个简单的深拷贝方法
  4. Swaks-smtp瑞士军刀(smtp邮件)
  5. Thread和Runnable的区别和联系、多次start一个线程会怎么样
  6. 服务器主板装w7系统死机,解决win7安装过程死机现象有一招
  7. OAuth 2.0: Bearer Token Usage
  8. 前端学习（752）：全局变量和局部变量
  9. 玩转Nacos参数配置！多图勿点
  10. 学习笔记--asp.net主题和外观（转自msdn，仅为自己学习存储和有意读者使用）
  11. python基础——python容器的有序性和可变性总结
  12. 炫酷的sublimeText开发工具 快捷键总结
  13. ext3日志模式---文件系统
  14. 图解机器学习算法 | 从入门到精通系列教程（机器学习通关指南·完结）
  15. 生成小程序二维码（草料）
  16. 返利平台php,MallWWI新模式返利商城系统 php版 v1.2.7
  17. 如何在水经注微图中加载地形地貌图进行道路设计
  18. 全新织梦DEDE CMS模板-精仿qq技术导航网站源码
  19. Apache安全漏洞
  20. 爬取段子网里面的搞笑段子

热门文章

  1. 十四.Deepin Linux V20.7 插入耳机听不到声音的解决办法
  2. mysql ley_len计算
  3. 大商创小程序前端_正版授权风暴！大商创商城系统开启免费送授权活动
  4. 历史小故事----BUG的来源
  5. 51nod-1299 监狱逃离（贪心）
  6. 湖北职称英语和职称计算机考试,湖北职称英语考试
  7. 测试手机新机软件,玩机小技巧 篇一：手把手教你快速验新机——写给剁手节买了新手机的值友...
  8. mysql docker还是rds_rds · 输出自己/docker-mysql - Gitee.com
  9. 安全修复之Web——Spring Framework 远程代码执行漏洞
  10. RunTime: 块内存复制