关于文本效果的练习，我们在前面也分享了不少，今天我们再来练习一个CSS实现的彩色文本效果生成器，它的最终效果如下：
<htm>
<head>
<meta charset=”UTF-8″>
<title>【每日一练】85- CSS分层文本阴影效果生成器的实现</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div>web前端开发</div>
<p>web前端开发博客网站:
<a href=”https://www.webqdkf.com/”>www.webqdkf.com</a>
</p>
</body>
</htm>
div{
font-size: 15rem;
text-align: center;
height:90vh;
line-height: 90vh;
color: #fcedd8;
background: #d52e3f;
font-family: ‘微软雅黑’;
font-weight: 700;
text-shadow:
5px 5px 0px #eb452b,
10px 10px 0px #efa032,
15px 15px 0px #46b59b,
20px 20px 0px #017e7f,
25px 25px 0px #052939,
30px 30px 0px #c11a2b,
35px 35px 0px #c11a2b,
40px 40px 0px #c11a2b,
45px 45px 0px #c11a2b;
}
p{
text-align: center;
font-family: “Helvetica”;
font-size:0.8rem;
}
a{
color: #d52e3f;
text-decoration: none;
font-family: ‘Niconne’, cursive;
font-size: 1.2rem;
}
好了，今天的【每日一练】就先到这里，希望今天的这个分享对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
