CSS Shapes布局让文字在圆环内排版实例页面

效果：

在CSS Shapes布局问世之前，文字像杂志一样的任意形状的排版几乎是不可能的，一直都是用网格、盒子和直线构造。CSS Shapes允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是任意的图像和多彩的渐变。

代码：

CSS代码：

.circle {
    border-radius: 50%;
    width: 207px; height: 250px;
    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);
    /* background: 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);
    /* background: radial-gradient(farthest-side ellipse at left, transparent 100%,  red); */
}

HTML代码：

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