text-shadow实现纯代码在网页中实现火焰字

最新推荐文章于 2024-01-23 21:09:19 发布

JianXingDeFeng

最新推荐文章于 2024-01-23 21:09:19 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：纯css阴影炫酷的css阴影 css火焰字 text-shadow

本文链接：https://blog.youkuaiyun.com/JianXingDeFeng/article/details/78697698

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS3的text-shadow属性实现火焰字效果。详细解释了text-shadow属性的四个值及其作用，并通过实例展示了如何调整这些值来创造不同的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-shadow实现纯代码在网页中实现火焰字

--既然用到了text-shadow就先说说这个属性吧！先说一句，我开始学就是css3了，那么就得从为什么要用这个属性开始介绍咯！

一、text-shadow属性简介

在css3未出之前，如果想要在网页上实现一个非常漂亮的火焰字比如这个

那就需要设计师或者ps大牛去捣鼓好一会了！

在CSS2中，如果想要实现文字的阴影效果，工程师们一般都是靠着设计师使用Photoshop等来实现。但是在CSS3中，这种效果用一个text-shadow属性就能实现了。几句代码即可搞定，简单好用。

下面就简单说下text-shadow的属性和用法吧！

简单点，text-shadow属性有四个值！如：text-shadow:0px 0px 0px #fff;

说明：

第一个值（数值），是水平阴影，单位px就好，允许负值，如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；

第二个值（数值），是垂直阴影，单位px就好，允许负值，如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；

第三个值（数值），是模糊值，理解为放大值就好，即是同样像素的东西被放大了，那么就会变得越来越模糊，难以看清的意思，这个值不能为负值，我试过负值无效或者报错了

第四个值（颜色），你可以设置什么颜色就什么颜色咯！

1、一般文字影响效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小效果</title>

	<style type="text/css">
		/*通配符重置浏览器默认的两个值，对本文没有太大影响，不知道可以无视*/
		*{
			margin: 0;
			padding: 0;
		}
		.div1{
			width: 500px;
			height: 100px;
			margin:20px auto 0;
			text-align: center;
			padding-top: 200px;
			font-size: 40px;
			font-weight: bold;
			font-family: "华文行楷";
			color:#E16008;
			background: #000;
			text-shadow: 3px 3px 0px #fff;
		}
	</style>
</head>
<body>
	<div class="div1">超炫火焰字</div>
</body>
</html>

效果如图：

这只是一般的阴影效果

实现方式，就是通过为其添加3px的左和下偏移的白色阴影

如果我们改变将text-shadow: 3px 3px 0px #fff;改变成：text-shadow: 3px 3px 6px #fff;

效果如图：

这个就是模糊值变化的效果了

2、突出文字效果

如果我们先将代码改成下面这些

color:#fff;
text-shadow: -2px 0px 0px #00f,/*向左阴影*/
	0px -2px 0px #00f,/*向上阴影*/
	2px 0px 0px #0f0,/*向右阴影*/
	0px 2px 0px #0f0;/*向下阴影*/

效果如图：

出现了左边和上边是蓝色，右边和下边是绿色的阴影了，是不是觉得很炫酷呢？

二、text-shadow可以设定多个指定属性

在CSS3中，可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。

也就是说，text-shadow属性可以为一个以英文逗号隔开的“值列表”，如：

text-shadow: -2px 0px 0px #00f,/*向左阴影*/
			 0px -2px 0px #00f,/*向上阴影*/
			 2px 0px 0px #0f0,/*向右阴影*/
			 0px 2px 0px #0f0;/*向下阴影*/

下面，我们使用text-shadow属性制作更为复杂的文本特效——火焰字。

将上面的第一个代码框里的text-shadow修改成下面的：

text-shadow: 0px 0px 2px #fff,0px -3px 3px #1EB,0px -6px 4px #01DEFD,0px -9px 5px #0BF,0px -12px 6px #08F;

效果如下：