背景颜色
.content {
width: 200px;
height: 200px;
background-image: linear-gradient(chartreuse, purple);
}
1、给盒子宽高
2、给盒子设置背景图片 渐变颜色；默认为垂直方向，也可通过改变角度，改变渐变的效果。
background-image: linear-gradient(45deg, chartreuse, purple);
背景颜色.png
文字渐变
.text-linear {
width: 200px;
height: 200px;
line-height: 200px;
background-image: linear-gradient(45deg,blue,green);
-webkit-background-clip: text;
color: transparent;
font-size: 50px;
font-weight: bold;
}
1、给盒子宽高
2、给盒子设置背景图片 渐变颜色
3、设置裁剪方式 从文本裁剪
4、设置字体颜色为透明
文字渐变.png
边框渐变
.box-linear {
width: 200px;
height: 200px;
padding: 5px;
background-image: linear-gradient(red,purple);
.box-1 {
width: 200px;
height: 200px;
background: #fff;
}
}
1、设置两个有嵌套关系的盒子
2、给大盒子设置宽高以及padding（padding的值就是需要渐变边框的宽度）
3、给大盒子设置背景图片 渐变颜色
4、给子元素设置宽高及背景颜色为白色；
5、如果需要圆角 必须两个元素都加 border-radius。
边框.png
