常用css

超出隐藏/换行

// 隐藏
display: -webkit-box;
// 需要显示几行，我这里需要显示一行，多余隐藏
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

// 换行
word-wrap: break-word;
word-break: break-all;

不显示滚动条样式

.screen_content {
    display: flex;
    align-items: center;
    word-break: keep-all;
    overflow: scroll;
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

  }

  .screen_content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }

下划线相关样式

text-decoration: underline solid 3px;
text-decoration-color: #f9822c; // 下划线颜色
  
//
  
text-decoration: underline;
text-underline-position: under; // 文字下划线位置

改变input框光标的颜色

input {
    color: blue;  /* 改变输入框内文字的颜色 */
    caret-color: red;  /* 改变输入框光标的颜色 */
}

垂直三角形

.triangle {
   width: 0;
    height: 0;
    border-top: 60px solid skyblue;
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid skyblue;
}

排序三角

 .top_three {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #c9c9c9;
    margin-bottom: 2px;
  }

  .bottom_three {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #c9c9c9;
  }

原生table属性

table {
  border-collapse: collapse; /* 边框合并，移除单元格之间的间隔 */
}

// 偶数行有背景色
tr:nth-child(even) {
  background-color: #fff8f5;
}
// 奇数行有背景色
tr:nth-child(odd) {
  background-color: #fff8f5;
}

文字（两字、三字、四字）对齐方式

text-align-last: justify;

滚动条整体样式

 /* 滚动条整体样式 */
  ::-webkit-scrollbar {
    width: 12px; /* 宽度 */
    height: 12px; /* 高度（针对水平滚动条） */
  }
  /* 滚动条滑块样式 */
  ::-webkit-scrollbar-thumb {
    background-color: darkgrey; /* 滑块颜色 */
    border-radius: 10px; /* 圆角 */
    border: 2px solid transparent; /* 边框 */
    background-clip: content-box; /* 确保边框不会覆盖到滑块内部 */
  }
  /* 滚动条轨道样式 */
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 轨道颜色 */
    border-radius: 10px; /* 圆角 */
  }
  /* 当鼠标悬停在滑块上时 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: grey; /* 鼠标悬停时的颜色 */
  }

vant 修改 van-field 默认的 placeholder 字体颜色

// vue2中修改van-field默认的placeholder字体颜色
::v-deep .van-field__control::-webkit-input-placeholder {
  color: #c8c9cc;
  -webkit-text-fill-color: #c8c9cc !important;
}

// vue3.2 中修改van-field默认的placeholder字体颜色(暂未使用，仅供参考)
:deep(.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
  font-size: 28px;
  -webkit-text-fill-color: #c8c9cc !important;
}

vant 表单校验提示要求只显示一行红色：直接改变字体颜色

::v-deep .van-field__control::-webkit-input-placeholder {
  color: #c8c9cc;
  -webkit-text-fill-color: #c8c9cc !important;
}