如何使用 CSS 实现文本环绕左上角四分之一圆的排版效果-html教程-PHP中文网

如何使用 CSS 实现文本环绕左上角四分之一圆的排版效果

本文详解如何通过 shape-outside 与 clip-path 配合 circle() 函数，并将圆心精确定位在容器左上角（0% 0%），实现文本自然环绕四分之一圆形区域的现代 CSS 布局效果。

本文详解如何通过 `shape-outside` 与 `clip-path` 配合 `circle()` 函数，并将圆心精确定位在容器左上角（0% 0%），实现文本自然环绕四分之一圆形区域的现代 css 布局效果。

要让文本真正“环绕”一个位于左上角的四分之一圆形区域（而非半圆或整圆），关键不在于改变 circle() 的半径，而在于将圆心锚点（at）精准设置为 0 0——即元素自身的左上角顶点。此时，circle(50% at 0 0) 表示：以左上角为圆心、半径为元素宽高各50%（即 75px）所绘制的圆，其可见部分恰好是该元素左上角的四分之一圆弧区域；配合 float: left 和 shape-outside，浏览器即可据此计算文本流的绕排边界。

以下是完整、可直接运行的实现代码：

.contenedor {
  width: 70vw;
  height: auto;
  margin: 25px auto;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
  padding: 40px;
}

#circle {
  float: left;
  width: 150px;
  height: 150px;
  margin: 0;
  /* 核心：圆心定位到左上角，生成四分之一圆的外轮廓 */
  shape-outside: circle(50% at 0 0);
  /* 同步裁剪视觉区域，确保只显示四分之一圆 */
  clip-path: circle(50% at 0 0);
  background: lightblue;
  /* 可选：增加文字与图形间的呼吸感 */
  shape-margin: 0.5em;
}

<div class="contenedor">
  <div id="circle"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Egestas dui id ornare arcu odio ut sem nulla. Urna et pharetra pharetra massa massa ultricies. Suscipit tellus mauris a diam maecenas sed enim...</div>
</div>

✅ 关键要点说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

shape-outside: circle(50% at 0 0) 定义了文本环绕的几何边界，它是一个以左上角为圆心、半径 75px 的圆——文本仅会避开该圆在左上象限内的部分，形成自然的“右下延伸”环绕效果；
clip-path: circle(50% at 0 0) 负责视觉裁剪，确保 <div id="circle"> 本身只渲染出四分之一圆，与 <code>shape-outside 严格对应；
shape-margin 不是装饰属性，而是影响环绕间距的重要参数，建议设为 0.5em～1em 以提升可读性；
⚠️ 注意：shape-outside 仅对浮动元素（float: left/right）生效，且父容器需有明确高度或清除浮动（本例中因后续内容自动撑开，无需额外处理）。