css文字底部阴影效果

时间:2022-07-25
本文章向大家介绍css文字底部阴影效果，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

今天要实现一个文字的阴影效果，大概是这个样子的

代码如下：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>css文字阴影效果</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			div{
				background: #0066CC;
				height: 400px;
				padding-top: 40px;
			}
			p {
				width: 280px;
				height: 66px;
				font-size: 70px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 45px;
				text-shadow: 0px 8px 0px rgba(24, 24, 24, 0.26);

			}
		</style>
	</head>
	<body>
		<div>
			<p>新闻资讯</p>
		</div>
	</body>

</html>

123456789101112131415161718192021222324252627282930313233

效果如下：

随机文章
WEB前端知识点必读
最近更新