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
。