shape-outside属性及其应用

发表于 2020-08-23 分类于探索

前言

shape-outside这个属性实在是太冷门了，要不是去研究<basic-shape>数据类型，还真不会发现这个属性；但是其兼容性也还算可以，PC端完全没问题，移动端iOS是支持比较好的，而安卓端则不太支持：

shape-outside是CSS Shapes Module Level 1规范中提出的一个属性，用于设置浮动元素周围内联元素对其包裹的形状，也就是说借助shape-outside属性可以使得浮动元素周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果；比如：

shape-outside及相关属性

CSS Shapes Module Level 1规范中不止设计了shape-outside一个属性，还有配合该属性一起搭配使用的属性：shape-image-threshold和shape-margin；

shape-outside

shape-outside属性的作用不再多说，语法如下：

none | [ <basic-shape> || <shape-box> ] | <image>^[1]

none：默认值，即默认的浮动区域（Float area），默认的浮动区域就是margin-box；

<basic-shape>：基本形状类型；

@keyframes shape {
  0% {
    clip-path: circle();
    shape-outside: circle();
  }
  25% {
    clip-path: ellipse(50% 30px);
    shape-outside: ellipse(50% 30px);
  }
  50% {
    clip-path: inset(30px 20px round 15px);
    shape-outside: inset(30px 20px round 15px);
  }
  75% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    shape-outside: polygon(50% 100%, 0% 0%, 100% 0%);
  }
}
.container {
  overflow: hidden;
}
.box {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: coral;
  animation: shape 5s linear alternate infinite;
}

上面这个动画就是展示了各种基本形状应用于shape-outside上的效果；

但是需要注意的是，<basic-shape>数据类型有一个参考盒模型的概念，对于shape-outside属性而言，默认的参考盒模型是margin-box，但是可以在属性中同时使用<shape-box>来指定一个参考盒模型！如：

1
2
3

.demo {
    shape-outside: content-box circle();
}

这样就把shape-outside属性的参考盒模型指定为content-box了！

<shape-box>：盒模型类型，包含margin-box、border-box、padding-box和content-box；
<image>：图像类型，包括url()函数引入的图像和渐变色；图像作为形状时，是根据图像的alpha通道（即透明通道）来作为形状的边界的，具体的通道阈值要取决于shape-image-threshold属性的值；

shape-margin

这个属性的作用很简单，就是沿着shape-outside属性生成形状再向外扩展相应的距离，不过扩展后的形状不能超过参考盒模型的区域！

.box {
    float: left;
    width: 200px;
    height: 200px;
    shape-margin: 10px;
    background-color: coral;
    clip-path: circle();
    shape-outside: content-box circle();
}

上面这个例子可以看到，尽管shape-margin讲形状向外扩展了10px，但是超出content-box区域外的部分并不视为浮动区域；

那么有没有办法使得浮动区域整体向外扩展相同的距离呢？就像margin属性的效果那样？答案是有，就是将margin-box设置为参考盒模型，然后使用margin属性即可！

.box {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: coral;
    clip-path: circle();
    shape-outside: circle();
}

因为参考盒模型为margin-box，所以设置margin属性可以扩大margin-box的大小，因此浮动区域也相应地扩大了，也就达到了类似一般盒模型中margin的效果；

shape-image-threshold

这个属性是专门用来设置图片形状提取时透明通道的阈值，范围为0 ~ 1，默认值为0；阈值为n代表图片中透明通道值大于n的区域都是浮动区域。

.box {
  --img: linear-gradient(45deg, rgba(220, 0, 0, 1), rgba(200, 0, 0, 0));
  float: left;
  width: 200px;
  height: 200px;
  background: var(--img);
  shape-outside: var(--img);
  shape-image-threshold: 0.5;
}