CSS 小技巧

1. 滤镜效果 (filter)

灰度效果 (grayscale): 将图片转换为黑白效果，filter: grayscale(100%); 使图片完全灰度化。

阴影效果 (drop-shadow): 为图片添加阴影，filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));。

模糊效果 (blur): 使图片模糊，filter: blur(3px);，数值越大越模糊。

亮度调整 (brightness): 调整图片亮度，filter: brightness(1);，数值大于1变亮，小于1变暗。

2. 文本省略

单行文本省略: 使用 text-overflow: ellipsis; 和 white-space: nowrap; 实现单行文本超出部分显示省略号。

多行文本省略: 使用 -webkit-line-clamp: 5; 和 display: -webkit-box; 实现多行文本省略。

3. 渐变效果

线性渐变 (linear-gradient): 创建沿直线过渡的颜色渐变，linear-gradient(to right, #ff9a62, var(--main--bg));。

径向渐变 (radial-gradient): 创建从中心向外辐射的颜色渐变，radial-gradient(rgb(243, 152, 73) 23%, #000000 75%);。

4. 遮罩效果 (mask)

遮罩渐变: 使用 mask: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); 实现图片边缘的渐变遮罩效果。

图片分割效果: 通过两张图片的重叠和不同的遮罩渐变，实现图片的分割渐变效果。

5. 背景混合模式 (background-blend-mode)

叠加模式 (overlay): 将背景图像和背景颜色混合，增强对比度，background-blend-mode: overlay;。

6. 文字效果

发光文字: 使用 text-shadow: 0px 0px 5px rgba(255, 255, 255); 实现文字发光效果。

毛玻璃效果: 使用 backdrop-filter: blur(2px); 实现背景模糊的毛玻璃效果。

7. 动画效果

图片轮播: 使用 @keyframes 和 transform: translateX(-50%); 实现图片的无限轮播效果。

扫光效果: 使用 @keyframes 和 background-clip: text; 实现文字或容器的扫光效果。

8. 元素倒影

倒影效果: 使用 -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgb(0, 0, 0, 0.8)); 实现元素的倒影效果。

9. 其他技巧

背景与颜色混合: 使用 background-blend-mode 和 background-color 实现背景图像与颜色的混合效果。

毛玻璃效果: 使用 backdrop-filter: blur(2px); 实现背景模糊的毛玻璃效果。