css文字底部阴影效果

王小婷

修改于 2020-09-27 06:50:39

2.1K00

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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

代码如下：

<!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