首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css文字底部阴影效果

css文字底部阴影效果

作者头像
王小婷
修改2020-09-27 14:50:39
1.9K0
修改2020-09-27 14:50:39
举报
文章被收录于专栏:编程微刊编程微刊

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

在这里插入图片描述
在这里插入图片描述

代码如下:

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

效果如下:

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档