html 火焰文字效果 霓虹文字效果(text-shadow)

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

text-shadow有四个属性

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

box-shadow有六个属性

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

html 火焰文字效果 霓虹文字效果(text-shadow)_第1张图片

/*页面样式设置*/
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;
}

你可能感兴趣的:(HTML基础知识)