文字阴影是用CSS3文本效果text-shadow来完成的
text-shadow：5px 5px 5px #f00；
第一个参数：水平阴影的位置
第二个参数：垂直阴影的位置
第三个参数：模糊的距离
第四个参数：阴影的颜色
文字渐变是用CSS3l渐变中的线性渐变linear-gradient()来实现的
background: linear-gradient(to right, red, blue);
从左边开始的线性渐变，从红色慢慢过渡到蓝色
<html>
<head>
<meta charset="utf-8">
<title>文字阴影与渐变效果</title>
<style type="text/css">
p{
font-size: 26px;
font-weight: 700;
}
span{
font-size: 26px;
font-weight: 700;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
.p2{
text-shadow: 5px 5px 5px #f00;
}
.p3{
text-shadow: 5px 5px 5px #0f0;
}
.p4{
text-shadow: 5px 5px 5px #00f;
}
.p5{
color: white;
text-shadow: 1px 1px 1px #3300FF;
}
</style>
</head>
<body>
<span>过零丁洋</span>
<p class="p2">辛苦遭逢起一经，干戈寥落四周星。</p>
<p class="p3">山河破碎风飘絮，身世浮沉雨打萍。</p>
<p class="p4">惶恐滩头说惶恐，零丁洋里叹零丁。</p>
<p class="p5">人生自古谁无死，留取丹心照汗青。</p>
</body>
</html>