CSS3 text-shadow 属性

老白 2周前 17浏览 0评论

 基础的文本阴影效果:

text-shadow:2px 2px 2px #fff X轴,Y轴,模糊程度(不可是负值),阴影颜色

效果一:

text-shadow: 0 0 20px red;


CSS3 text-shadow 属性 CSS学习 第1张

效果二:

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
 
CSS3 text-shadow 属性 CSS学习 第2张

效果三:

text-shadow: 0 1px 1px #fff;
 
CSS3 text-shadow 属性 CSS学习 第3张

效果四:

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
 
CSS3 text-shadow 属性 CSS学习 第4张

效果五:

text-shadow: 0 0 5px #f96;
 
CSS3 text-shadow 属性 CSS学习 第5张
 

效果六:

text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
CSS3 text-shadow 属性 CSS学习 第6张

效果七:

text-shadow: 1px 1px 0 #E4F1FF;

CSS3 text-shadow 属性 CSS学习 第7张

效果八:

text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;
 
CSS3 text-shadow 属性 CSS学习 第8张

效果九:

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
 
CSS3 text-shadow 属性 CSS学习 第9张

效果十:

text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8);
CSS3 text-shadow 属性 CSS学习 第10张

效果十一:

text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;    /*注意:第一个阴影色和背景色相同;文本前景色和第二个阴影色相同*/
 
CSS3 text-shadow 属性 CSS学习 第11张
 

效果十二:

text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
 
CSS3 text-shadow 属性 CSS学习 第12张

CSS3 text-shadow 属性 CSS学习 第13张

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
 text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果!</h1>
</body>
</html>

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

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

定义和用法

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

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

语法

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

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

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

 

发表评论