如何让文本围绕圆形 Div 流动？-css教程-PHP中文网

如何让文本围绕圆形 Div 流动？

Barbara Streisand

发布： 2024-11-15 01:50:02

原创

434 人浏览过

How to Make Text Flow Around Rounded Divs?

增强圆形 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中文网其他相关文章！