您的位置:首页> 前端教程> CSS3教程
文章导航

CSS text-shadow

2019-9-17 08:55| 作者: admin| 查看: 1224| 评论: 1|来自: 蚂蚁部落

在此之前,如果设置文字的阴影效果,通常要利用其他工具,比如使用Photoshop制作相应的图片,单纯使用css很难实现;CSS3提供的text-shadow属性可以实现之前难以实现的效果。

语法结构:

不同的教程中,语法结构形式的表述有所不同,总之阐述的都是一个意思,选择最容易理解的一种:

[CSS] 纯文本查看 复制代码
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...

语法注释:

(1).颜色:表示阴影的颜色值。

(2).x轴:水平方向的偏移量,单位是像素。

(3).y轴:垂直方向的偏移量,单位是像素。

(4).模糊半径:阴影的影响范围,不能为负值,值越大越模糊。

上面的语法结构的关键字顺序也可以有第二种形式:

[CSS] 纯文本查看 复制代码
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...

阴影的颜色可以在最前面也可以在最后面。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 300px 0px 0px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落</div>
</body> 
</html>

x轴偏移量演示,将文字的水平偏移量设置为300px,阴影颜色为绿色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 0px 60px 1px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落</div>
</body> 
</html>

y轴偏移量演示,将文字的垂直偏移量设置为60px,阴影颜色为绿色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 10px 20px 5px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落</div>
</body> 
</html>

上面的代码同时演示了x轴和y轴的偏移效果。

多层阴影:

所谓多层阴影,就是给文字施加多个阴影样式,之间用逗号分隔。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  text-shadow:green 5px 10px 5px,blue 8px 10px 6px; 
  font-size:80px; 
} 
</style> 
</head> 
<body> 
<div>蚂蚁部落</div>
</body> 
</html>
4

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

发表评论

最新评论

引用 admins 2019-6-26 16:18
感觉不错哟

查看全部评论(1)

返回顶部