CSS Shapes布局与文字在圆圈内排版实例页面

展示

代码

• HTML：

  <p class="circle">
      <before></before><after></after>
      在CSS Shapes布局问世之前，让网页中的文字像杂志一样有任意样式的排版是很难的，过去一直都是用网格、盒子和直线构造排版样式。CSS Shapes布局允许我们定义文本环绕的几何形状，这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是多彩的渐变图形。
  </p>

• CSS：

  .circle {
      border-radius: 50%;
      width: 207px; height: 240px;
      color: white;
      background-color: deepskyblue;
      text-shadow: 1px 1px rgba(0,0,0,.5);
      padding: 10px;
      text-align: justify;
  }
  before {
      float: left;
      width: 50%; height: 100%;
      shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red);
  }
  after {
      float: right;
      width: 50%; height: 100%;
      shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);
  }