一、阴影
text-shadow：文字添加阴影；
语法：text-shadow: h-shadow v-shadow blur color；
| 值 | 说明 |
| h-shadow | 必需。水平阴影的位置，允许负值。 |
| v-shadow | 必需。垂直阴影的位置，允许负值。 |
| blur | 选填。模糊的距离。 |
| color | 选填。阴影的颜色。 |
text-shadow属性可连接一个或更多的阴影文本，阴影文本用逗号分隔开。
文字阴影效果如下：
文字阴影代码：
<style>
.root{
margin: 50px;
}
.text{
width: 200px;
margin: auto;
font-size: 44px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px skyblue,-2px -2px 4px skyblue;
}
</style>
<body>
<div class="root">
<div class="text">文字渐变</div>
</div>
</body>二、渐变
linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...)；
| 值 | 说明 |
| direction | 用角度值指定渐变的方向（或角度）。 |
| color-stop1,color-stop2,... | 用于指定渐变的起止颜色。 |
创建一个线性渐变，需要指定至少两个颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
/* 从上到下，蓝色渐变到红色 */ linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
背景渐变效果图：
背景渐变代码：
.text{
width: 200px;
height: 80px;
margin: 50px auto;
background: linear-gradient(180deg, #fff 0%, #63E9FF 50%, #066574 100%);
border: 1px solid red;
}
字体渐变效果图：
背景渐变代码：
.text{
width: 200px;
height: 80px;
line-height: 80px;
margin: auto;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
-webkit-background-clip属性用于指定背景的绘制区域。
有三种指定方式：
text：背景被裁剪到文本
border-box：背景被裁剪到边框盒子
padding-box：背景被裁剪到内边距框
content-box：背景被裁剪到内容框
text指定方式效果图：
.text{
width: 200px;
height: 80px;
line-height: 80px;
margin: auto;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: text;
color: transparent;//需要给文本填充透明颜色，将背景颜色填充为文本前景色
}content-box指定方式效果图：
content-box指定方式代码：
.text{
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: content-box;
padding: 10px;
border: 10px dashed red;
}padding-box指定方式效果图：
padding-box指定方式代码：
.text{
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: padding-box;
padding: 10px;
border: 10px dashed red;
}border-box指定方式效果图：
border-box指定方式代码：
.text{
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: border-box;
padding: 10px;
border: 10px dashed red;
}三、文字添加阴影且渐变
效果图：
.text{//文字渐变
width: 200px;
height: 80px;
line-height: 80px;
margin: auto;
font-size: 40px;
background: linear-gradient(to bottom, #0dd8f3, #38667c, #121150);
-webkit-background-clip: text;
color: transparent;
}
.text::before{//添加伪类元素且伪类元素添加阴影，设置层级
z-index: -1;
content: '文字渐变';
position: absolute;
text-shadow: 4px 4px 4px #014753, 0px 0px 2px rgba(255,255,255,0.16);
}
