html 火焰文字效果霓虹文字效果（text-shadow）

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

熟悉的新风景

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

阅读量3.4k

点赞数 3

分类专栏： # HTML与css

本文链接：https://blog.csdn.net/weixin_44797182/article/details/99699241

版权

HTML与css 专栏收录该内容

26 篇文章

订阅专栏

shadow 阴影; 影子; 有两个应用

text-shadow有四个属性

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

box-shadow有六个属性

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

在这里插入图片描述

/*页面样式设置*/
body {
    background-color: black;
    color: white;
    font-size: 80px;
    font-weight: bold;
    padding: 30px;
}
/*火焰样式*/
#fire {
    margin: 30px;
    text-shadow: 
	    0 0 5px #fff, 
	    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; 
}
/*霓虹灯样式*/
#neon {
    margin: 30px;
    text-shadow: 
	    0 0 10px #fff, 
		0 0 20px #fff, 
		0 0 30px #fff, 
		0 0 40px #6AB5FF, 
		0 0 70px #6AB5FF, 
		0 0 80px #6AB5FF, 
		0 0 100px #6AB5FF, 
		0 0 150px #6AB5FF;
}