🎨 11 个实用 CSS 技巧，提升你的前端开发效率
在日常前端开发中，CSS 往往被认为只是“样式美化”的工具，但其实它远比我们想象中强大。掌握一些 CSS 的实用小技巧，不仅可以大幅提升开发效率，还能写出更优雅、可维护的代码。本文将整理一系列 CSS 中常被忽视但极具价值的小技巧，帮助你在页面布局、响应式设计和用户体验上更进一步。
1. 图片文字环绕：shape-outside
使用 shape-outside 属性可以让文本围绕非矩形的图形流动，实现更具创意的排版效果。
.any-shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}
支持的形状包括：([Tailwind CSS][1])
圆形：
circle(50%)椭圆：
ellipse(60px 80px)多边形：
shape-outside: polygon(0 0, 100% 100%, 0 100%);
注意：使用 shape-outside 时，元素必须设置 float 属性。
2. 简化选择器：:where()
:where() 伪类可以将多个选择器合并，减少代码重复，提高可读性。([GeeksforGeeks][2])
/* 原写法 */
.parent div,
.parent .title,
.parent #article {
color: red;
}
/* 使用 :where() 简化 */
.parent :where(div, .title, #article) {
color: red;
}
:where() 的特性是其内部的选择器不会增加选择器的特异性（specificity），有助于样式的覆盖和管理。
3. 实现平滑滚动：scroll-behavior
为页面添加平滑滚动效果，提升用户体验。
html, body {
scroll-behavior: smooth;
}
当用户点击锚点链接时，页面将平滑滚动到目标位置，而不是瞬间跳转。
4. 背景混合模式：background-blend-mode
通过 background-blend-mode 属性，可以将背景图像与背景颜色进行混合，创造出丰富的视觉效果。
.blend-2 {
background-image: url(../xx/xxx.jpg);
background-color: #20126f;
background-size: cover;
background-blend-mode: overlay;
}
常用的混合模式包括：multiply、screen、overlay、darken、lighten 等。
5. 图像填充文字：background-clip: text
使用 background-clip: text 可以将背景图像裁剪到文字形状，实现文字填充图像的效果。([Michael Gearon][3])
h1 {
background-image: url('./flower.jpg');
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
注意：为确保兼容性，需添加 -webkit- 前缀，并将文字颜色设置为透明。
6. 文字描边效果：text-stroke
为文字添加描边效果，增强视觉层次感。
div {
color: #fff;
font-size: 80px;
-webkit-text-stroke: 2px blue;
}
-webkit-text-stroke 属性目前主要在 WebKit 内核的浏览器中支持。
7. 文字大小写转换：text-transform
通过 text-transform 属性，可以轻松实现文字的大小写转换。([CSS-Tricks][4])
.upper {
text-transform: uppercase;
}
.lower {
text-transform: lowercase;
}
应用示例：
<div class="upper">this text will be uppercase</div>
<div class="lower">THIS TEXT WILL BE LOWERCASE</div>
8. 暂停/播放伪类：:paused
:paused 伪类可以为处于暂停状态的媒体元素设置样式。
video:paused {
opacity: 0.6;
}
需要注意的是，目前仅 Safari 浏览器支持该伪类。
9. 毛玻璃特效：backdrop-filter
使用 backdrop-filter 属性，可以为元素后面的内容添加模糊等滤镜效果，创造出毛玻璃的视觉效果。
.login {
backdrop-filter: blur(5px);
}
其他常用的滤镜效果包括：
- 模糊：
blur(5px) - 亮度：
brightness(1.4) - 对比度：
contrast(2) - 灰度：
grayscale(60%) - 透明度：
opacity(50%)
注意：为了看到效果，元素或其背景需要有一定的透明度。([W3Schools][5])
10. 自定义光标：cursor
通过 cursor 属性，可以为页面设置自定义的鼠标指针。
body {
cursor: url("path-to-image.png"), auto;
}
常用的光标类型包括：
default：默认光标pointer：指示链接的手型move：可移动的指示器text：文本输入指示器wait：等待指示器
使用自定义图像时，建议提供一个备用的系统光标类型，以确保兼容性。
11. 裁剪各种形状：clip-path
clip-path 属性允许你将元素裁剪成各种形状，实现独特的视觉效果。
常见形状示例：
矩形：
clip-path: inset(5% 20% 15% 10%);圆形：
clip-path: circle(30% at 50% 50%);椭圆：
clip-path: ellipse(45% 30% at 50% 50%);多边形（如三角形）：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
你还可以使用工具如 Clippy 来可视化生成 clip-path 的路径代码，方便快捷。([bennettfeely.com][6])
✨ 总结
CSS 的魅力在于它的“以简驭繁”，一个看似简单的属性或技巧，可能就能解决你遇到的大问题。希望这些常用小技巧能为你的开发工作带来灵感和帮助。