如何使用 CSS 使文本环绕圆形 Div？

如何使用 CSS 将文本保留在圆形 Div 中

在这个问题中，用户想要一个带有文本的圆形 div，如提供的图像所示。然而，用户圆形 div 中的文本显示为方形。

使用 CSS

要使用 CSS 达到所需的效果，用户可以考虑以下选项：

1。利用 shape-outside

此属性允许自定义内联内容围绕非矩形形状的包装。正如 Mozilla 开发者网络文档中所述，这是一个具有良好浏览器支持的现代解决方案。

2.创建具有背景渐变的形状

对于圆形 div，您可以创建径向渐变部分以使文本环绕其周围。这是一个示例：

div:not([class]) {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

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

div[class][id]:before {
  background: radial-gradient(circle at top right, transparent 69%, red 69%);
}

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

div[class][id]:after {
  background: radial-gradient(circle at top left, transparent 69%, red 69%);
}

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