CSS shape-outside关键字属性值测试demo实例页面

回到相关文章 »

效果：

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

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

选择shape-outside属性值

none

margin-box

border-box

padding-box

content-box

代码：

CSS代码：

.shape {
    float: left;
    width: 60px; height: 60px;
    padding: 10px; margin: 10px;
    border: 10px solid;
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
    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;
    });
});