css文字底部阴影效果

￡神魔★判官ぃ 2022-12-09 13:59 255阅读 0赞

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

![在这里插入图片描述][2020092216472561.png_pic_center]  
代码如下：

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

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[2020092216472561.png_pic_center]: /images/20221123/716cb4746d3d464cbcdf33d68906b5f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/90720a6e18d64df1a901e327f48d5b75.png

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 css阴影效果

CSS可以用来创建各种阴影效果，这些效果可以应用于文本、元素或整个容器。以下是一些常见的CSS阴影效果示例：文本阴影： .text-shadow \{ text-sha

￡神魔★判官ぃ/ 2024年03月03日 08:46/ 0 赞/ 39 阅读

相关 css文字阴影----渐渐模糊效果

text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和

我不是女神ヾ/ 2023年02月18日 11:58/ 0 赞/ 160 阅读

相关 css文字底部阴影效果

今天要实现一个文字的阴影效果，大概是这个样子的 ![在这里插入图片描述][2020092216472561.png_pic_center] 代码如下： <!DO

￡神魔★判官ぃ/ 2022年12月09日 13:59/ 0 赞/ 256 阅读

相关 CSS 边框阴影效果

\shadow1\{ width: 200px; height: 100px; color: white; background-color: red

川长思鸟来/ 2022年09月27日 13:28/ 0 赞/ 259 阅读

相关 CSS文字条纹阴影动画

See the Pen [shadow text][] by haiqing wang ([@whqet][whqet]) on[CodePen][]. 今天给大家推荐个动画

比眉伴天荒/ 2022年08月24日 14:17/ 0 赞/ 186 阅读

相关 CSS-文字效果

1.1、自定义字体: <!doctype html> <html lang="en"> <head> <meta charset="

逃离我推掉我的手/ 2022年07月15日 10:30/ 0 赞/ 292 阅读

相关 css3-文本阴影效果、凹凸效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

短命女/ 2022年07月14日 00:43/ 0 赞/ 234 阅读

相关利用CSS设置文字的阴影效果

text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下： text-shadow: \[X-of

水深无声/ 2022年05月26日 23:35/ 0 赞/ 252 阅读

相关 css3文本效果——文字阴影和文字换行

1. 文字阴影：text-shadow text-shadow: h-shadow v-shadow blur color; text-shadow 属性向文本添加

偏执的太偏执、/ 2022年05月08日 22:22/ 0 赞/ 305 阅读

相关 canvas给文字增加阴影效果

var canvas = document.getElementById('canvas'); canvas.width='300'; canv

不念不忘少年蓝@/ 2021年07月24日 19:06/ 0 赞/ 540 阅读