位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > text-shadow 文本阴影
阅读(22555525)      收藏       赞(5685)      分享
上一篇: text-overflow 属性 下一篇: word-break 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

属性定义及使用说明

text-shadow 属性应用于阴影文本。

默认值:

none

继承:

yes

版本:

CSS3

JavaScript 语法:

object.style.textShadow="2px   2px #ff0000"

语法

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

注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每23个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。

示例

小白教程网www.2d5.net

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本阴影 text-shadow</title>
<!--定义内部样式-->
<style>
     .css01{
        text-shadow:2px 2px 8px #FF0000;/*文字阴影模糊效果*/
     }
     .css02{
             color:white;/*白色*/
             text-shadow:2px 2px 4px #000000;/*文字阴影*/
     }       
     .css03{
        text-shadow:0 0 3px #FF0000; /*霓虹灯的光芒文字阴影*/
     }               
</style>    
</head>
<body>
     <!--没有缩进-->
     <h2>
             没有任何效果的字体
     </h2>
 
     <h2>
             文字阴影模糊效果
     </h2>
    
     <h2>
             白色文字上的文字阴影
     </h2>   
    
     <h2>
             霓虹灯的光芒文字阴影
     </h2>           
</body>
</html>
效果图

小白教程网www.2d5.net

image.png

上一篇: text-overflow 属性 下一篇: word-break 属性
毕业设计网             广告联系QQ:45157718(微信同号)