CSS shape-outside PNG图片测试demo实例页面

效果：

在CSS Shapes布局问世之前，文字像杂志一样的任意形状的排版几乎是不可能的，一直都是用网格、盒子和直线构造。

CSS Shapes允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是任意的图像和多彩的渐变。

例如这里，使用半透明图像的 url 来定义形状，这样文本就会自动环绕它。重要的是要注意图像使用必须要兼容 CORS（不要跨域，或者服务器设置'Access-Control-Allow-Origin'），否则会出错，而没有环绕效果。

代码：

CSS代码：

.shape {
    float: left;
    width: 200px; height: 300px;
    background-color: currentColor;
    shape-outside: url(./birds.png);
    -webkit-mask: url(./birds.png) no-repeat;
    mask: url(./birds.png) no-repeat;
    color: #cd0000;
}

HTML代码：

<span class="shape"></span>
<p>在CSS Shapes问世之前...</p>