多行文本渐变的实现

本教程实现一个如下的多行文本渐变的效果:


多行文本渐变
<span>Singapore:<br>Lion City<br>Lion City<br>Lion City<br>LionCity...</span>
span {
    display: block;
    background: linear-gradient(180deg, #000, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    padding: 0.5em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

参考

https://codepen.io/rpsthecoder/pen/erBWOE

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。