手把手教你使用css3给文字添加阴影效果(代码详解)

之前的文章《CSS篇:如何将页面背景设置渐变效果(代码详解)》中,给大家介绍了怎样使用css设置背景色渐变。下面本篇文章给大家介绍怎样使用css3给文字添加阴影效果呢,我们一起看看怎么做。

手把手教你使用css3给文字添加阴影效果(代码详解)

css3给文字添加阴影效果代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字阴影</title> 
<style>
h1
{text-shadow: 7px 10px 6px #FF0145;}
p
{text-shadow: 5px 5px 5px #FF0000;}
p1
{text-shadow: 5px 5px 5px #FF4780;}
</style>
</head>
<body>

<h1>https://www.sxiaw.com/</h1>
<p>https://www.sxiaw.com/</p>
<p1>文字阴影</p1>
	

</body>
</html>

代码运行效果图

1.jpg

文字是没有阴影效果的时候用