css 文字环绕效果 #9

gaoryrt · 2019-04-25T06:34:48Z

实现效果如图，文字沿着圆形的边缘环绕

gaoryrt · 2019-04-25T06:43:49Z

这个就是个 shape-outside属性，使用也很简单：

<body>
  <div class="shape"></div>
  <div class="text">Lorem ipsum ...</div>
</body>

.shape {
  shape-outside: circle(50%);
  width: 500px;
  height: 500px;
  float: left;
}

gaoryrt · 2019-04-25T06:46:28Z

除了 circle 之外，还支持很多 css 函数：

shape-outside: circle()
shape-outside: ellipse()
shape-outside: inset(10px 10px 10px 10px)
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px)

当然 url 也可以：

shape-outside: url(image.png)

从支持的 css 函数来说，有点像 clip-path。

gaoryrt · 2019-04-25T06:49:20Z

gaoryrt changed the title ~~css~~ css 圆形文字环绕效果 Apr 25, 2019

gaoryrt changed the title ~~css 圆形文字环绕效果~~ css 文字环绕效果 Apr 25, 2019

gaoryrt added the effect construct of some effect label Apr 25, 2019

Provide feedback