CSS技巧（自用）

背景图片铺满屏幕

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
文字渐变动画

背景范围 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