背景图片铺满屏幕
background:url("xxxxx") no-repeat center center; /*加载背景图*/ /* 背景图不平铺 */
background-size:cover; /* 让背景图基于容器大小伸缩 */
background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ //此条属性必须设置否则可能无效/
background-color:#CCCCCC; /* 设置背景颜色，背景图加载过程中会显示背景色 */
文字渐变色
实现方法：
利用css的background-clip和text-fill-color属性，先给文字所在的内联块级元素设置animation背景渐变动画，然后用text-fill-color:transparent;设置文字填充颜色为透明，再用background-clip:text以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
例子：
// css
.font-color {
font-weight: 700!important;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#007eef,#dc5cb6 25%,#007eef 50%,#dc5cb6 75%,#007eef);
background-size: 200%,100%;
-webkit-background-clip: text;
/* -webkit-animation: word 3s linear infinite; */
animation: word 3s linear infinite;
-webkit-animation: word 3s linear infinite;
display: inline-block;
}
@keyframes word {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
// html
<div class="font-color">文字渐变动画</div>
背景范围 css3 background-origin
若不想padding或border中也有背景，不用在里面套一层div，只要设置background-origin为content-box即可。
Less中无法解析斜杠（'/'）
如border-radius: 0% 97% 97% 0% / 0% 50% 50% 0%;，less会报错，则将斜杠写成e('/')即可。即border-radius: 0% 97% 97% 0% e('/') 0% 50% 50% 0%;
css animation-fill-mode: backwards的作用
若该动画没有delay，或未定义from和0%状态，则backwards与none在表现效果上没有区别
若该动画有delay，则none是delay结束，动画开始时样式变为from或0%中定义的样式；backwards是在delay开始时就变为from或0%中定义的样式，delay结束再进行动画。参考https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html
