HTML | DOM 样式 textShadow 属性(1)

📌 相关文章

📜 HTML | DOM 样式 textShadow 属性(1)

📅 最后修改于: 2023-12-03 15:15:36.837000 🧑 作者: Mango

HTML | DOM 样式 textShadow 属性

在 HTML DOM 中， textShadow 属性设置文本阴影。

语法

object.style.textShadow="h-shadow v-shadow blur color";

属性值解释:

h-shadow：水平阴影位置。必须设置。
v-shadow：垂直阴影位置。必须设置。
blur：模糊距离。
color：阴影颜色。默认是黑色。

实例

下面的例子演示如何设置文本阴影：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>

<h1>我的文本阴影</h1>

</body>
</html>

效果如下：

Text Shadow

可以看到"h1"元素加上了阴影效果.

浏览器支持

下表列出了对 textShadow 属性的支持:

| 属性 | IE | Firefox | Chrome | Safari | Opera | | ------------ | --- | ------- | ------ | ------ | ----- | | textShadow | 9.0 | 3.5 | 2.0 | 3.1 | 10.5 |

总结

textShadow 属性是一个强大的特性。它可以使用各种颜色、阴影位置和模糊距离来创建各种文本阴影效果。希望这篇介绍对您有所帮助。