背景顏色
.content {
width: 200px;
height: 200px;
background-image: linear-gradient(chartreuse, purple);
}
1、給盒子寬高
2败京、給盒子設(shè)置背景圖片 漸變顏色兜喻；默認(rèn)為垂直方向，也可通過改變角度赡麦，改變漸變的效果朴皆。
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隧甚、給盒子設(shè)置背景圖片 漸變顏色
3车荔、設(shè)置裁剪方式 從文本裁剪
4、設(shè)置字體顏色為透明
文字漸變.png
邊框漸變
.box-linear {
width: 200px;
height: 200px;
padding: 5px;
background-image: linear-gradient(red,purple);
.box-1 {
width: 200px;
height: 200px;
background: #fff;
}
}
1戚扳、設(shè)置兩個(gè)有嵌套關(guān)系的盒子
2、給大盒子設(shè)置寬高以及padding（padding的值就是需要漸變邊框的寬度）
3族吻、給大盒子設(shè)置背景圖片 漸變顏色
4帽借、給子元素設(shè)置寬高及背景顏色為白色珠增；
5、如果需要圓角 必須兩個(gè)元素都加 border-radius砍艾。
邊框.png
