CSS同时设置阴影和渐变

最新推荐文章于 2024-04-23 08:05:56 发布

fiona-frontEnd

最新推荐文章于 2024-04-23 08:05:56 发布

阅读量433

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/DeliaWen/article/details/126521729

版权

本文介绍了如何在CSS中同时应用阴影和渐变效果，详细解析了相关HTML结构和CSS样式代码，帮助读者掌握这一前端技巧。

摘要由CSDN通过智能技术生成

每一行代码（包括属性）都不是多余的

HTML

<h1 data-text="酸菜肥肠" class="shadow linear-gradient">酸菜肥肠</h1>

CSS

	h1 {
	    position:relative;
	    font-size: 70px;
	    color: #FF0052;
	}
    /* 渐变 */
    h1.linear-gradient{
        background: -webkit-linear-gradient(90deg,#FF0052,#802F7B);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* 阴影 */
    h1.shadow:after{
        content: attr(data-text); /* 关键代码， 把html的data-text属性值作为content*/ 
        text-shadow:  2px 5px 2px rgb(12,34,125); /* 不能设置color */
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; /* 注意层级 */
}