14个CSS实用技巧，少写几百行代码
做网页的时候，很多效果我们总想着用JavaScript去实现。其实CSS早就有了更好的办法。下面这14个技巧，能帮你省掉很多重复代码。
一、布局调整
1. gap属性管理间距
以前我们给列表项加间距，总要这么写：
.item + .item {
margin-left: 16px;
}还得处理最后一个元素，挺麻烦的。
现在用flex或grid布局时，直接加一行就行：
.container {
display: flex;
gap: 16px;
}gap会自动处理好所有子元素之间的间距，不用再写那些多余代码。
2. 一行搞定居中
以前让一个元素居中，要写两行：
.parent {
display: flex;
justify-content: center;
align-items: center;
}现在用grid布局，一行就够了：
.parent {
display: grid;
place-items: center;
}这个写法适合大多数居中场景。
3. 响应式字体不用写媒体查询
以前为了手机和电脑显示不同大小的字，要写好几段代码：
.title { font-size: 24px; }
@media (max-width: 768px) { .title { font-size: 18px; } }
@media (max-width: 480px) { .title { font-size: 14px; } }现在用clamp函数一行就够：
.title {
font-size: clamp(14px, 3vw, 24px);
}clamp(最小值, 首选值, 最大值)会根据屏幕宽度自动调整字体大小。
二、文字处理
4. 多行文本截断
显示多行文字后加省略号，以前很多人用JS去算。现在三行CSS就搞定：
.text-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}把3改成你想显示的行数就行。
5. 标题折行更美观
标题折行时，经常出现最后一行只剩一两个字的情况。加一行代码就能让浏览器自动均衡每行的字数：
h1, h2, h3 {
text-wrap: balance;
}标题看起来舒服很多。
6. 竖排文字
以前用旋转的方法做竖排文字，还要调宽高位置。现在直接用writing-mode：
.vertical-text {
writing-mode: vertical-rl;
}文字自动竖排，不用管其他样式。
三、视觉效果
7. 毛玻璃效果
做毛玻璃卡片不用切图，两行CSS代码：
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border-radius: 16px;
}加个边框效果更好：
.glass-card {
border: 1px solid rgba(255, 255, 255, 0.3);
}8. 渐变边框
以前做渐变边框要套两层div，现在一个元素就能搞定：
.gradient-border {
border: 3px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(white, white),
linear-gradient(135deg, #6366f1, #ec4899);
background-origin: border-box;
}9. 文字反色融合
让文字根据背景颜色自动反色：
.blend-text {
color: white;
mix-blend-mode: difference;
}滚动时文字颜色会跟着背景变化，效果很特别。
四、交互动效
10. 父元素选择器
以前输入框获得焦点时，想给父元素加样式要用JS监听。现在用:has()直接就能选：
.form-group:has(input:focus) {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}不需要写任何JS代码。
11. 元素出现动画
弹窗出来时的动画效果，以前要等元素渲染后再加class。现在用@starting-style提前定义：
.dialog {
opacity: 1;
transform: translateY(0);
}
@starting-style {
.dialog {
opacity: 0;
transform: translateY(-20px);
}
}元素第一次出现时就会自动执行动画。
五、其他实用技巧
12. 平滑滚动加锚点偏移
点击锚点链接时，页面平滑滚动，而且不会被顶部导航栏挡住：
html {
scroll-behavior: smooth;
}
.section {
scroll-margin-top: 80px;
}80px改成你导航栏的高度就行。
13. 统一表单控件颜色
让checkbox、radio、进度条等表单控件都变成你的品牌色：
:root {
accent-color: #6366f1;
}一行代码全改完。
14. 支持系统深色模式
让网页自动跟随系统切换深色模式：
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text: #f1f5f9;
}
}配合CSS变量，深色浅色模式都能自动适配。
总结
现在CSS能做很多以前只能用JS实现的效果。这些技巧学完就能用，不用装任何库，也不用担心兼容问题。写代码的时候多想想，说不定三行CSS就能解决的事，不用写几十行JS。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
