CSS shape-image-threshold测试demo实例页面

回到相关文章 »

效果：

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

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

选择shape-image-threshold属性值

0.0

0.3

0.6

0.8

代码：

CSS代码：

.shape {
    float: left;
    width: 200px; height: 120px;
    --gradient: linear-gradient(145deg, #cd0000, transparent);
    background: var(--gradient);
    shape-outside: var(--gradient);
    transition: shape-image-threshold .3s;
}

HTML代码：

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

JS代码：

[].slice.call(document.querySelectorAll('input[name="threshold"]')).forEach(function (radio) {
    radio.addEventListener('click', function () {
        document.querySelector('.shape').style.shapeImageThreshold = this.value;
    });
});