1. 点击出现蓝色闪烁

解决闪烁问题： -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

2. 图片加载时高度突增

如果您只知道图片的比例（宽高比），而不知道具体的尺寸，您仍然可以通过一些技巧来处理图片加载时高度突然增加的问题。

一种常见的方法是使用 CSS 中的 padding 和 ::before 伪元素来创建一个占位元素，使其占据与图片相同比例的空间。这样在图片加载之前，页面布局就已经考虑了图片的尺寸，避免了高度突然增加的问题。

以下是一个示例：

<div class="image-container">
    <div class="image-ratio"></div>
    <img src="your-image.jpg" alt="Your Image">
</div>

.image-container {
    position: relative;
}

.image-ratio {
    padding-top: 75%;
    /* 设置占位元素的上内边距，这里假设图片比例为4:3，即高度为宽度的75% */
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 控制图片如何适应容器 */
}

在这个示例中， .image-ratio 类被用作占位元素，通过设置其上内边距为图片比例对应的值，来占据与图片相同比例的空间。图片则使用绝对定位，填充整个父容器，并通过 object-fit: cover; 来控制图片的展示方式。

这种方法可以帮助您在只知道图片比例而不知道具体尺寸的情况下，避免图片加载时高度突然增加的问题。您可以根据实际情况调整比例和样式来满足您的需求。

3. 毛玻璃效果

&::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47px;
    z-index: -2;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;

    /* 实际起作用代码 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

参考链接: 什么是毛玻璃效果（Glassmorphism）？仅使用 HTML 和 CSS 来实现

4. 解决 border-radius 和 border-image 的确可能会有兼容性问题

border-radius 和 border-image 的确可能会有兼容性问题。为了确保两者一起工作，可以尝试使用以下方法：

使用背景渐变替代边框渐变： 将渐变应用为背景并使用 padding 来模拟边框效果。

.styled-div {
    border-radius: 16px;
    padding: 1px; /* 模拟边框宽度 */
    background: linear-gradient(180deg, rgba(190, 255, 239, 1), rgba(230, 227, 227, 1));
    overflow: hidden; /* 确保子元素不会超出圆角 */
}

.inner-content {
    border-radius: 15px; /* 内部内容的圆角应比外部小 */
    background: white; /* 内部背景颜色 */
    height: 100%; /* 填满父容器 */
}

HTML 结构：

<div class="styled-div">
    <div class="inner-content">
        <!-- 内容 -->
    </div>
</div>

这种方法通过在 div 内部添加一个子元素来实现圆角和渐变效果。这样可以确保 border-radius 和渐变效果同时存在。

5. CSS 实现多行文本“展开收起”

Demo 演示

<div class="text">
  <button class="btn">展开</button>
  浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 477px;
  border: 1px solid pink;
}
.text::before{
  content: '';
  float: right;
  width: 0; /*设置为0，或者不设置宽度*/
  height: 50px; /*先随便设置一个高度*/
}
.btn {
  float: right;
  clear: both;
  /*其他装饰样式*/
}

参考链接: CSS 实现多行文本“展开收起@稀土掘金技术社区

6. background 相关

css 设置 background-image 高度固定280 宽度适应居中

.your-element {
    height: 280px; /* 设置固定高度 */
    background-image: url('your-image-url.jpg'); /* 替换为你的图片路径 */
    background-repeat: no-repeat; /* 防止图像重复 */
    background-position: center; /* 图像居中 */
    background-size: auto 100%; /* 宽度自动，高度占满容器 */
}

Element-UI

清除 校验提示信息

this.$nextTick(() => {
    this.$refs.form?.clearValidate && this.$refs.form.clearValidate();
});

手动校验

actionValidateJobReferrerUserId(rule, value, callback) {
    if (!value) return callback(); // 选填 不填也可以通过
    if (/^\d+$/.test(value)) return callback();
    return callback(new Error('请输入正确的用户ID（数字）'));
}

x. tips

功能描述	CSS 代码	参考链接
简体转繁体	font-variant-east-asian: traditional;	📎
表格边框合并	border-collapse: collapse;	-
平滑滚动	scroll-behavior: smooth;	-
抗锯齿	-webkit-font-smoothing: antialiased;	-
不占大小的边框	box-shadow: 0 0 0 1px #00b88f inset;	-
flex子元素宽度溢出解决	min-width: 0	📎
DOM操作性能	innerHTML: 触发回流和重绘 innerText: 通常不触发回流和重绘	-
CSS梯形	clip-path: polygon(100% 0, 88% 100%, 0 100%, 0 0);	📎
背景渐变透明	background: linear-gradient(to bottom, transparent, #ffffff);	-
光标颜色	caret-color: #ffd476;	-
文字竖排	writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px;	-
盒子纵横比	aspect-ratio: 521 / 320;	-
占位空字符 (超神奇！)	<title>[U+200E]</title> <title>‎</title>	-