css各类常用的样式整理

css背景渐变：

background: linear-gradient(to right, #FFDAB9, #87CEEB);

background: linear-gradient(135deg, #FFDAB9, #87CEEB);

css字体颜色渐变：

background: linear-gradient(to right, #ff0000, #ffff00); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;/*给文字设置成透明 注意 如果有字体的text-shadow的话，会导致阴影盖在字体之上*/

渐变阴影同时存在下效果

  .fsyt_head-title {
    text-align: center;
    font-size: 2rem;
    color: #fff;
    line-height: 5.5rem;
    letter-spacing: 5px;
    font-family: 'headTitleFont';
    background: linear-gradient(to top, #ffffff, #c8daff); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;/*给文字设置成透明 注意 如果有字体的text-shadow的话，会导致阴影盖在字体之上*/
  }
    .fsyt_head-title::before{//添加伪类元素且伪类元素添加阴影，设置层级
      z-index: -1;
      content: '文字渐变';
      position: absolute;
      text-shadow: 4px 4px 4px #014753, 0px 0px 2px #07bbf0;
    }

渐变边框

  border-bottom: 1px solid;
  border-image: linear-gradient(to right, red, yellow) 1;

class活绑定

:class=" jizuName == 1? 'dcs_bigscr_bg':'dcs_big_bg'"