CSS shape-margin测试demo实例页面

效果：

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

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

拖动下面的滑块，改变shape-margin属性值，看看文字与图形之间的间距是如何变化的。

调整shape-margin

代码：

CSS代码：

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

HTML代码：

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