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

回到相关文章 »

效果:

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

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

选择shape-outside属性值

代码:

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;
    });
});