小码哥的IT人生

Style textShadow 属性 详解

css3基础 2023-07-30 03:20:58小码哥的IT人生shichen

Style textShadow 属性

定义和用法

textShadow 属性设置或返回文本的一种或多种阴影效果。

另请参阅:

CSS 教程:CSS 文本阴影

CSS 参考手册:text-shadow 属性

实例

例子 1

给文本添加阴影:

document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000, 10px 10px 1px #0000ff";

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<body>
<p id="demo">这是示例段落。</p>
<button type="button" onclick="myFunction()">为文本添加阴影</button>
<p><b>注释:</b>Internet Explorer 9 及更早版本不支持 textShadow 属性。</p>
<script>
function myFunction() {
  document.getElementById("demo").style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

例子 2

返回文本阴影:

alert(document.getElementById("myP").style.textShadow);

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<body>
<p id="demo" style="text-shadow:2px 2px green;">这是示例段落。</p>
<button type="button" onclick="myFunction()">返回 p 的文本阴影</button>
<p><b>注释:</b>Internet Explorer 9 及更早版本不支持 textShadow 属性。</p>
<script>
function myFunction() {
  alert(document.getElementById("demo").style.textShadow);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

语法

返回 textShadow 属性:

object.style.textShadow

设置 textShadow 属性:

object.style.textShadow = "none|h-shadow v-shadow blur color|initial|inherit"

注释:textShadow 属性将一个或多个阴影添加到文本。该属性是以逗号分隔的阴影列表,每个阴影由 2 或 3 个长度值和可选颜色规定。省略的长度为 0。

属性值

描述
none 不绘制阴影。默认。
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
color

可选。阴影的颜色。

请查看 CSS 颜色值,获取可能的颜色值的完整列表。

initial 将此属性设置为其默认值。请参阅 initial
inherit 从其父元素继承此属性。请参阅 inherit

技术细节

默认值: none
返回值: 字符串,表示应用于元素文本的阴影效果列表,以逗号分隔。
CSS 版本: CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 10.0 支持 支持 支持

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024