CSS3文字阴影

最新推荐文章于 2021-03-18 11:03:27 发布

拳是套路

最新推荐文章于 2021-03-18 11:03:27 发布

阅读量666

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_43750811/article/details/105625707

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3文字阴影

CSS3设置文字阴影效果text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。在写网页的过程中，大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。
这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

语法:

text-shadow：x y blur color

参数:

x : 表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；
y : 是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；
blur : 是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
color : 是指阴影的颜色，其可以使用rgba色。

效果1 ----- 描边特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#box{
			font-size: 50px;
			color: #fff;
  			text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96;
		}
		
	</style>
	<body>
		<div id="box">Stroke text effect</div>
	</body>
</html>

效果图:
在这里插入图片描述

效果2 ----- 3D特效

#box{
			font-size: 50px;
			color: #fff;
  			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),
  			6px 6px rgba(197, 223, 248,0.8);
		}

在这里插入图片描述

效果2 ----- 火焰特效

#box{
			font-size: 70px;
			margin-top: 200px;
			 color: #000;
            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;

		}

在这里插入图片描述

拳是套路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3文字阴影

CSS3文字阴影CSS3设置文字阴影效果text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。在写网页的过程中，大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。语法:text-shadow：x y blur colo...
复制链接

扫一扫

专栏目录