1、使用 Tailwind CSS 隐藏滚动条

/* global styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* 隐藏 Chrome, Safari 和 Opera 的滚动条 */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* 隐藏 IE, Edge 和 Firefox 的滚动条 */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

在代码中使用

 <div class="flex-1 overflow-y-scroll no-scrollbar"></div>

2、如何画出0.5px边框

方法一：使用伪元素和 transform
一种常见的解决方案是使用 CSS 的伪元素 (::before 或 ::after) 和 transform: scale() 来模拟 0.5px 的边框。具体步骤如下：

创建一个相对定位的父元素。
在父元素内部创建一个绝对定位的伪元素。
为伪元素设置 1px 的边框。
使用 transform: scale(0.5) 将伪元素缩小 50%。
设置 transform-origin: 0 0 确保缩放中心在元素的左上角。

      .box {
        width: 200px;
        height: 100px;
        margin: 20px auto;
        position: relative;
        background-color: #f0f0f0;
      }

      .box::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border: 1px solid red; /* 边框颜色 */
        transform: scale(0.5);
        transform-origin: 0 0;
      }

方法二：使用双重边框
另一种方法是使用两个重叠的 1px 边框，其中一个设置为半透明，来模拟 0.5px 的边框效果。这可以通过以下 CSS 实现：

   .double-border {
        width: 200px;
        height: 100px;
        margin: 20px auto;
        border: 1px solid transparent; /* 半透明外层边框 */
        border-bottom: 1px solid blue; /* 实色底部边框 */
      }

3、css 实现文字的渐变色

.text {
    position: absolute;
    left: 52px;
    top: 1px;
    width: 200px;
    height: 31px;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 31px;
    text-shadow: 0px 0px 8px #000000;
    text-align: center;
    font-style: normal;
    transition: all 0.3s;
    cursor: pointer;
    &-active {
      // 渐变文字 从上到下
      background: linear-gradient(to bottom, #ffffff 50%, #1767c4 100%);
      background-clip: text;
      color: transparent;
      text-shadow: 0px 0px 100px rgba(0, 0, 0, 0.8);
    }
  }

4、用 CSS 写一个渐变色边框的输入框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        width: 800px;
        height: 100px;
        display: flex;
        border-radius: 50px;
        overflow: hidden;
        position: relative;
        background: linear-gradient(
          to right,
          #ff8e10,
          #e4ca0f,
          #6ecd00,
          #00cedc,
          #204578
        );
      }
      .input {
        position: absolute;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        border-radius: 50px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="btn">
      <div class="input"></div>
    </div>
  </body>
</html>