css3之文本和颜色功能之text-shadow

本文详细介绍了 CSS 中 text-shadow 属性的使用方法及多种效果实现,包括基本语法、参数说明以及如何创建燃烧文字、3D效果、模糊效果和复古风格等。

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

总本看一下

1.text-shadow

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

h-shadow:	必需。水平阴影的位置。允许负值。
v-shadow:	必需。垂直阴影的位置。允许负值。	
blur:                可选。模糊的距离。            
color:	        可选。阴影的颜色   

 demo:

1.text-shaow属性接受以逗号分隔的阴影效果,燃烧的文字

h1{
	text-shadow: 0 0 4px white,
				0 -5px 4px #ff3,
				2px -10px 6px #fd3,
				-2px -15px 11px #f80,
				2px -25px 18px #f20;
	
}

 效果: 

2.3D效果

 

h1{
	text-shadow: -1px -1px white,
				1px 1px #333;
	color:#D1D1D1;
}
html{
	background-color:#D1D1D1;
}

效果:

   

还可以设置凹体效果

3.Blurytext Effect(模糊效果)

h1{
	text-shadow: 0 0 4px #f96;
	color:transparent;
}

4.Vintge/Retro text effect

h1{
	text-shadow: 5px 5px 0 #666,7px 7px 0 #eee;
	color:#eee;
}

 

转载于:https://www.cnblogs.com/myzy/p/5916248.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值