如何讓文本圍繞圓形 Div 流動？

增強圓形 Div 中的文字放置

可以使用 CSS 技術來建立無縫容納文字的圓形 div。但是，預設情況下，圓角 div 通常以方形格式顯示文字。

目前情況：

如提供的JSFiddle (http://jsfiddle.net) 所示/kUJq8/)，以下CSS 產生一個帶有方形的圓形div text:

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

解決方案1：Shape-Outside

現代瀏覽器支援shape-outside 屬性，提供了將文字環繞在複雜形狀周圍的直接解決方案。對於圓形，語法為：

div {
    width: 320px;
    height: 320px;
    shape-outside: circle(50%);
    background: #333;
    color: #FFF;
}

注意： 應考慮瀏覽器對 shape-outside 的支援。

解決方案 2：偽元素漸變

替代方法涉及使用影像或漸變來定義圓形 形狀。對於後一種方法，使用了四個偽元素：

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

div[class]:before {
  /* ... */
}

div[class][id]:before {
  /* ... */
}

div[class]:after {
  /* ... */
}

div[class][id]:after {
  /* ... */
}

透過使用仔細定位的徑向漸變，這些偽元素有效地創建了圓形的錯覺。當與主 div 的圓角結合使用時，文字會根據需要環繞圓角。

以上是如何讓文本圍繞圓形 Div 流動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！