CSS - text-shadow 属性

text-shadow 属性用于为文本添加阴影效果。它允许您指定阴影的颜色、偏移、模糊半径和扩散半径。

可能的值

<color>:

设置阴影的颜色。
它是可选的。
它可以在偏移值之前或之后指定。
可以指定任何颜色值，例如名称、十六进制或 RGB 值。

<offset-x><offset-y>：

任何长度值，指定 x 和 y 值。
X 值表示阴影与文本的水平距离。
Y 值表示阴影与文本的垂直距离。
如果 x 和 y 值等于 0，则阴影将显示在文本后面。

<blur-radius>

任何长度值，指定 blur-radius 的值。
它是可选的。
要使模糊看起来更大，您需要提供更高的值。
如果未传递任何值，则取为 0。

适用于

所有 HTML 元素。

DOM 语法


object.style.textShadow = "5px 5px 3px red";

前两个（5px，5px）值指定阴影偏移的长度，即 X 坐标和 Y 坐标。
第三个值（3px）指定模糊半径。
最后一个值（红色）描述阴影的颜色。

CSS text-shadow - 简单的阴影效果

以下示例演示了如何在文本周围设置阴影。并非所有浏览器都支持此功能 -


<html>
<head>
</head>
<body>
	 	<h2>Text Shadow</h2>
	 	 	 <p style="text-shadow: 5px 5px 3px yellow;">Text shadow</p>
	 	 	 <p style="text-shadow: 10px 5px #00ffff;">Text shadow</p>
	 	 	 <p style="text-shadow: blue 0px 0px 2px">Text shadow</p>
	 	 	 <p style="text-shadow: rgb(26, 69, 105) 0px 0px 10px">Text shadow</p>
</body>
</html>

本页