css文字底部阴影效果

最新推荐文章于 2023-12-14 11:47:49 发布

前端王小婷

最新推荐文章于 2023-12-14 11:47:49 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_44763569/article/details/108735864

版权

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

在这里插入图片描述
代码如下：

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

效果如下：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端王小婷

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="C
复制链接

扫一扫