如何使用 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中文網其他相關文章！