CSS 样式1. content 无论内容有多少页脚始终在最底部通过计算属性 calc() 来实现 2.页脚在当前可视

1. 底部永远在最下方

// 统一html
<body>
  <div class="top">top</div>
  <div class="content">
    <div>center</div>
  </div>
  <div class="footer">footer</div>
</body>

// 通过计算属性 calc() 来实现
    body {
      height: 100vh;
    }

    .top,
    .footer {
      height: 50px;
      width: 100%;
    }

    .top {
      background: #ff2;
    }

    .content {
      width: 100%;
      background: rgb(129, 55, 55);
      min-height: calc(100vh - 100px);
    }

    .footer {
      background: rgb(1, 55, 55);
    }

2.页脚在当前可视化页面底部

  <style>
    .top,
    .footer {
      height: 50px;
      width: 100%;
    }
    .top {
      background: #ff2;
    }
    .content {
      width: 100%;
      background: rgb(129, 55, 55)
    }
    .footer {
      position: fixed;
      bottom: 0px;
      background: rgb(1, 55, 55);
    }

  </style>

3.页头在顶部

  <style>
    .top,
    .footer {
      height: 50px;
      width: 100%;
    }
    .top {
      position: fixed;
      top: 0px;
      background: #ff2;
    }
    .content {
      width: 100%;
      background: rgb(129, 55, 55)
    }
    .footer {
      background: rgb(1, 55, 55);
    }

  </style>

4. 从左向右颜色改变3秒

.animating {
    position: relative;
}
.animating::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    opacity: 0.3;
    background: linear-gradient(180deg, #4d53e8 -100%, #ffffff 80%);
    transform-origin: left;
    border-radius: 8px;
    animation: LeftToRight 3s infinite;
}

@keyframes LeftToRight {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

5.超出部分省略号

.smileDark { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; display: 
    inline-block; width: 100px;（自行设置） 
}

.smileDark { 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
}

6.固定宽高--垂直滚动

.roll {
  height: 250px;
  overflow-y: auto;
}

7.渐变色

background: linear-gradient(110deg, blue 40%, rgb(0, 0, 0) 2% 50%, green 40%);

8. 禁止鼠标事件触发

.no-pointer { pointer-events: none }

9. 模糊背景或者元素

.blur { filter: blur(20px) }

10.渐变文本

background:inear-gradient(to top, red 0%, blue 100%);
color:transparent;
-webkit-background-clip:text;

11.光标颜色

input{
  caret-color:#ff0000;
}