css技巧-01

1. 控制数字等宽

font-variant-numeric: tabular-nums;

默认情况下：font-variant-numeric: normal;

等宽情况下：

2. 整体页面处于灰色

body{
  filter: grayscale(1);
}

3. 不允许选择文本

.box p:last-child {
  user-select: none;
}

4.最后一个不设置样式

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. 隐藏滚动条

.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

6. 删除 type="number" 末尾的箭头

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

7. 文字智能适配背景颜色。

mix-blend-mode: difference

8. 居中显示

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

9. 0.5px 边框

elemnt:after {
   poistion: absolute;
   left: 0;
   bottom: 0;
   content: ' ';
   width: 100%;
   height: 1px;
   transfrom: scaleY(50%);
}

10. 单行省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;

11. ios移动端底部安全距离

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

h5也可全局加上

body {
    margin: env(safe-area-inset-bottom);
}