您的位置：首页 > Web前端 > CSS

CSS3--文字阴影

2017-01-03 09:34 239 查看

CSS3设置文字阴影效果text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。在写网页的过程中，大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。

语法：text-shadow：x y blur color, …

参数：

x 横向偏移，即代表距离左多少距离开始显示阴影效果

y 纵向偏移，即代表距离上多少距离开始显示阴影效果

blur 模糊距离，即代表阴影范围大小

color 阴影颜色

这个属性可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色，可以使用颜色英文，也可以使用十六进制的颜色。

注意：

1）文本阴影如果加很多层，会很卡很卡很卡，所以不建议添加很多层文本阴影。

2）此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影案例</title>
<style>
p{
color: #000;
font-size: 100px;
font-weight: bold;
text-shadow: 4px 4px 0px #75ffcd;
}
</style>

</head>
<body>
<p>世上无难事，只怕有心人</p>
</body>
</html>

效果：

下面是三个有意思的字体阴影效果，其实在网络上可以看到很多关于文字阴影的效果，可以学习下如何使用，用这个装饰还是比较平滑的效果，感觉还不错^^。

效果一：

层叠效果，方式如前面的语法显示一样，只是多添加了几个修饰效果，中间用逗号隔开。

实现代码：

p{
color: #000;
font-size: 100px;
font-weight: bold;
text-shadow:4px 4px 2px #f8ceff,  8px 8px 2px #8affbd;
}

效果二：

光晕效果，其实就是添加了模糊效果，在不同程度上的模糊添加不同的颜色就可以实现。

实现代码：

p{
color: #000;
font-size: 100px;
font-weight: bold;
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de,
0 0 100px #ff00de, 0 0 150px #ff00de;
}

效果三：

火焰效果。

实现代码：

p{
color: #000;
font-size: 100px;
font-weight: bold;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c,
-20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font-family:Verdana, Geneva, sans-serif;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航