CSS shape-outside基本形状函数测试demo实例页面

回到相关文章 »

效果：

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

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

选择shape-outside属性值

代码：

CSS代码：
.shape {
    float: left;
    width: 100px; height: 100px;
    margin: 10px;
    background-color: currentColor;
    shape-outside: circle();
    clip-path: circle();
    color: #cd0000;
}
HTML代码：
<span class="shape"></span>
<p>在CSS Shapes问世之前...</p>
JS代码：
[].slice.call(document.querySelectorAll('input[name="shape"]')).forEach(function (radio) {
    radio.addEventListener('click', function () {
        document.querySelector('.shape').style.shapeOutside = this.value;
        document.querySelector('.shape').style.clipPath = this.value;
    });
});