如何使文本环绕圆形 Div？

增强圆角 Div 以包含文本

许多项目需要圆角 div 来无缝包含文本。但是，默认情况下，圆形 div 通常会使文本显示为方形。 CSS 提供了解决此问题的解决方案。

Shape-Outside：现代方法

shape-outside 属性允许将内联内容包裹在非矩形形状周围。它使设计人员能够自定义环绕方式，包括围绕复杂的对象和圆圈。应考虑浏览器对 shape-outside 的支持。

渐变和伪元素技术

径向渐变和伪元素的组合可以创建圆形区域排斥文字。从一个方框开始，使用四个浮动伪元素，并在圆中心外绘制径向渐变。调整渐变以覆盖必要的区域。

例如，以下 CSS 和 HTML 代码即可达到预期效果：

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

<div>
  <div class="shape"></div>
  <div class="shape"></div>
</div>

以上是如何使文本环绕圆形 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！