要为文字设置深灰色阴影，可以使用CSS的`text-shadow`属性

Bol5261

已于 2024-04-09 22:05:35 修改

阅读量2k

点赞数

于 2020-06-29 17:12:28 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/107024247

版权

Job(a good job programmer) 同时被 3 个专栏收录

2356 篇文章

订阅专栏

HTML5(HyperText Markup)

305 篇文章

订阅专栏

CSS(Cascading Style Sheets)

231 篇文章

订阅专栏

本文介绍了如何使用CSS的text-shadow属性为文字设置深灰色阴影。通过调整阴影的水平偏移量、垂直偏移量及模糊距离，可以实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要为文字设置深灰色阴影，可以使用CSS的text-shadow属性。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
  .text-shadow {
    font-size: 24px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }
</style>
</head>
<body>

<h1 class="text-shadow">这是一个带有深灰色阴影的文字</h1>

</body>
</html>

在这个示例中，我们创建了一个名为.text-shadow的CSS类，将字体大小设置为24像素，颜色设置为白色，并使用text-shadow属性添加了一个深灰色阴影。阴影的水平偏移量为2像素，垂直偏移量为2像素，模糊距离为4像素。

text-shadow 属性向文本设置阴影。
默认值： none
继承性： yes
版本： CSS3
JavaScript 语法： object.style.textShadow=“2px 2px #ff0000”

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影</title>
<style type="text/css">
p {
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	color:#f90;
	text-shadow:-5px -5px 3px #00f,	
				5px 5px 3px #333;			/* 添加文字阴影 */
	
}
</style>
<body>
<p>阴影属性<br />
  text-shadow</p>
</body>
</html>