【总结】CSS（SCSS） 不常用属性

1、设置 antd Meta 组件中 title 过长自动换行：

  .ant-card-meta-title {
    white-space: normal; /* 允许文本换行 */
    overflow: visible; /* 防止内容被截断 */
    text-overflow: clip; /* 禁用文本省略号 */
  }

2、选择器书写：

  .QR {
    &:hover {}
  }

3、设置文字渐变色：

.slogan {
  width: 768px;
  height: 75px;
  background-image: linear-gradient(260.41deg, #b2a3ea -23.42%, #20cac0 59.93%, #8ad4a8 103.95%);
  background-clip: text; /* 背景裁剪到文本 */
  color: transparent; /* 文本颜色设置为透明，以显示背景 */
      }

4、设置 fixed header 背景的模糊度：

  .header {
    background-color: rgba(195, 242, 239, 0.9);
    backdrop-filter: blur(10px); /* 设置模糊度 */
    z-index: 200;
}

 5、背景 ui 元素位置与 button 重叠，虽然显示在 button 下方，但会阻碍 button 的 click 活动：

   .circle {
    pointer-events: none;
  }

这样ui元素就不会接收鼠标事件，点击事件会穿透 circle 到达 button。

6、background-blend-mode属性

.element {
    background-color: #ff0000; /* 红色背景 */
    background-image: url('background.jpg'); /* 背景图像 */
    background-blend-mode: multiply; /* 混合模式 */
}

background-blend-mode 是 CSS 中的一个属性，它定义了如何将一个元素的背景图像与元素本身的背景颜色或者背景层之间进行混合。这个属性提供了一种方式来控制背景图像和颜色之间的视觉效果，类似于图像编辑软件中的图层混合模式。

常见的混合模式

• normal：默认值，背景图像直接覆盖在背景颜色上。
• multiply：背景图像与背景颜色相乘，产生暗化效果。
• screen：背景图像与背景颜色相加，产生亮化效果。
• overlay：结合了 multiply 和 screen 模式，暗部使用 multiply，亮部使用 screen。
• darken：选择背景图像和背景颜色中的较暗颜色。
• lighten：选择背景图像和背景颜色中的较亮颜色。
• color-dodge：使背景颜色更亮，背景图像中的白色部分将使背景颜色更接近白色。
• color-burn：使背景颜色更暗，背景图像中的黑色部分将使背景颜色更接近黑色。
• hard-light 和 soft-light：类似于 overlay，但 hard-light 效果更强烈。
• difference：背景图像和背景颜色的差值，用于创建高对比度效果。
• exclusion：类似于 difference，但对比度较低。
• hue：保留背景图像的色相，但使用背景颜色的饱和度和亮度。
• saturation：保留背景图像的饱和度，但使用背景颜色的色相和亮度。
• color：保留背景图像的色相和饱和度，但使用背景颜色的亮度。
• luminosity：保留背景图像的亮度，但使用背景颜色的色相和饱和度。

7、-webkit-backdrop-filter 和 backdrop-filter

作用：用于应用滤镜效果到一个元素的背景（即元素内容后面的区域）。

• -webkit-backdrop-filter 是一个带有浏览器前缀的属性，它是由 WebKit/Chromium 引擎支持的，主要用于早期的 Chrome、Safari 等浏览器。这个前缀版本意味着它可能只在这些浏览器的特定版本中有效。

• backdrop-filter 是没有前缀的标准属性，它被所有现代浏览器支持，或者是在去掉前缀后被支持。这意味着它不需要特定的浏览器前缀就可以在大多数浏览器中使用。

在实际开发中，为了确保最佳的兼容性，通常会同时使用这两个属性。