box-decoration-break文本不规则渐变demo页面

回到相关文章 »

效果：

专门弄了个社交专用的微信号：zhangxinxu-job

代码：

CSS代码：

.box {
    width: 200px;
}
.text {
    padding: 5px;
    color: #fff;
    background-image: linear-gradient(to right, blue, red 200px);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

HTML代码：

<div class="box">
    <span class="text">专门弄了个社交专用的微信号：zhangxinxu-job</span>
</div>

JS代码：

button.addEventListener('click', function () {
    var cssValue = this.getAttribute('data-value');
    if (cssValue == 'clone') {
        text.classList.add('clone');    
        this.setAttribute('data-value', 'slice');
    } else {
        text.classList.remove('clone');
        this.setAttribute('data-value', 'clone');
    }
});