CSS3 text-shadow 属性

实例

基础的文本阴影效果：

  1. h1
  2. {
  3. text-shadow: 5px 5px 5px #FF0000;
  4. }

页面底部有更多实例。

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有主流浏览器都支持 text-shadow 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

定义和用法

text-shadow 属性向文本设置阴影。

默认值： none
继承性： yes
版本： CSS3
JavaScript 语法： object.style.textShadow="2px 2px #ff0000"

语法

  1. text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。

实例

带有模糊效果的文本阴影

该例演示带有模糊效果的文本阴影。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {text-shadow:2px 2px 8px #FF0000;}
  6. </style>
  7. </head>
  8. <body>
  10. <h1>模糊效果的文本阴影！</h1>
  12. </body>
  13. </html>

白色文本上的阴影

本例演示白色文本上的文本阴影。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. color:white;
  7. text-shadow:2px 2px 4px #000000;
  8. }
  9. </style>
  10. </head>
  11. <body>
  13. <h1>白色文本的阴影效果！</h1>
  15. </body>
  16. </html>

霓虹灯效果的文本阴影

本例演示带有霓虹灯效果的文本阴影。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. text-shadow:0 0 3px #FF0000;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>霓虹灯效果的文本阴影！</h1>
  14. </body>
  15. </html>

相关页面

CSS3 教程：CSS3 文本效果