如何使文本環繞圓形 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中文網其他相關文章！