在日常前端开发中我们经常会遇到一些看起来很简单但处理起来又有点麻烦的问题图标太小不容易点击图片尺寸不统一导致布局错乱SVG 颜色不好控制页面滚动到锚点后被顶部导航遮挡想实现毛玻璃效果却发现元素本身也被模糊了想给不规则 PNG 添加阴影却只能得到矩形阴影很多时候这些问题并不需要引入 JavaScript也不需要额外的库只需要几个容易被忽略的 CSS 属性就能轻松解决。下面整理了17 个项目中非常实用的 CSS 技巧建议收藏备用。一、最值得掌握的几个 CSS 技巧1. 增大元素的点击热区在移动端页面或工具栏中图标的视觉尺寸可能只有 16px 或 24px如果直接点击图标操作体验往往不太好。最直接的方法是增加元素宽高但这样容易影响布局。更推荐使用伪元素扩大点击区域。.like-button{position:relative;}.like-button::before{content:;position:absolute;inset:-12px;border-radius:50%;}伪元素会把按钮四周的点击区域分别扩大 12px而不会影响页面布局。注意伪元素必须属于可点击元素点击事件会正常传递给.like-button。示例https://code.juejin.cn/pen/7308632485130240050另一种简单写法.like-button{padding:12px;margin:-12px;}不过负 margin 可能影响布局、滚动区域以及点击关系使用前建议充分测试。React Native 中可以直接使用Pressable hitSlop{{ top: 12, right: 12, bottom: 12, left: 12, }} Icon / /Pressable2. 使用:has()根据子元素控制父元素过去CSS 很难根据子元素的状态修改父元素样式通常需要 JavaScript。现在可以直接使用:has().form-item:has(input:focus){border-color:#1677ff;}更多场景根据错误信息修改样式.form-item:has(.error-message){border-color:red;}根据复选框状态修改父元素.option:has(input:checked){background:#e6f4ff;border-color:#1677ff;}判断是否包含图片.card:has(img){padding-top:0;}和相邻选择器结合label:has( input:required)::after{content:*;color:red;}3. 使用currentColor让 SVG 自动继承文字颜色currentColor表示当前元素的color属性值。.button{color:#666;}.button:hover{color:#1677ff;}.button svg{fill:currentColor;}buttonclassbuttonsvgviewBox0 0 24 24pathd...//svg收藏/button鼠标悬停时文字和 SVG 会一起变色无需单独修改 SVG 颜色。对于描边图标svg{stroke:currentColor;}4. 使用drop-shadow()给透明 PNG 添加自然阴影很多人不知道box-shadow和filter:drop-shadow()完全不是同一种阴影。普通阴影.logo{box-shadow:0 8px 20pxrgb(0 0 0 / 20%);}透明 PNG.logo{filter:drop-shadow(0 8px 12pxrgb(0 0 0 / 25%));}区别/* 根据矩形盒模型生成阴影 */box-shadow:0 8px 20pxrgb(0 0 0 / 20%);/* 根据图片真实轮廓生成阴影 */filter:drop-shadow(0 8px 20pxrgb(0 0 0 / 20%));适用于SVGLogo商品抠图透明 PNG5. 使用scroll-margin-top避免锚点被导航栏遮挡很多文档站都会遇到这个问题。.header{position:fixed;top:0;height:64px;}点击锚点ahref#install安装方式/asectionidinstallclassarticle-section/section解决办法.article-section{scroll-margin-top:80px;}整个页面统一偏移也可以html{scroll-padding-top:80px;}区别scroll-margin-top作用于目标元素scroll-padding-top作用于滚动容器二、图片与布局6. 使用object-fit控制图片裁剪图片尺寸不一致时直接指定宽高容易被拉伸。img{width:300px;height:200px;object-fit:cover;}常见值cover填满容器超出部分裁剪contain完整显示可能留白控制裁剪位置img{object-fit:cover;object-position:center top;}7. 使用aspect-ratio保持宽高比以前需要padding-top:56.25%;现在.video{aspect-ratio:16 / 9;}简单很多。8. 使用clamp()实现响应式尺寸.title{font-size:clamp(24px,5vw,64px);}还可以用于.section{padding-inline:clamp(16px,5vw,80px);}.card{width:clamp(280px,50vw,600px);}相比大量媒体查询更加简洁。9.clip-path和mask有什么区别clip-path更适合几何裁剪.avatar{clip-path:circle(50%);}三角形.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);}六边形.hexagon{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}mask更适合图片、透明度和渐变裁剪.icon{background:currentColor;mask:url(icon.svg)center/contain no-repeat;-webkit-mask:url(icon.svg)center/contain no-repeat;}渐隐.content{mask-image:linear-gradient(to bottom,black 70%,transparent);}简单理解clip-path裁几何图形mask裁图片和透明效果10. 使用column-count实现多栏布局.article{column-count:2;}列间距.article{column-count:2;column-gap:32px;}更推荐.article{column-width:320px;column-gap:32px;}浏览器会自动决定列数更适合响应式布局。三、视觉效果11. 使用backdrop-filter实现真正的毛玻璃很多人会误写成filter:blur(12px);结果整个元素包括文字都模糊了。正确写法.glass{background:rgb(255 255 255 / 60%);backdrop-filter:blur(12px);}注意backdrop-filter模糊的是元素后面的内容而不是元素本身因此通常需要半透明背景。12. 一行 CSS把 SVG 或 PNG 图标变成黑色或白色变黑img{filter:brightness(0);}变白img{filter:brightness(0)invert(1);}适用于SVGLogo单色图标深色模式切换不适用于照片或复杂渐变图片。13. 使用mix-blend-mode实现混合效果.hero-title{color:white;mix-blend-mode:difference;}文字会根据背景自动产生反差。常见模式mix-blend-mode:multiply;mix-blend-mode:screen;mix-blend-mode:overlay;mix-blend-mode:difference;mix-blend-mode:exclusion;复杂页面建议.container{isolation:isolate;}四、交互体验优化14. 使用pointer-events实现事件穿透.overlay{pointer-events:none;}让元素显示但不接收点击事件。如果部分子元素仍需要点击.overlay{pointer-events:none;}.overlay button{pointer-events:auto;}15. 使用user-select控制文本是否可选禁止选中文字.button{user-select:none;}拖拽区域.drag{user-select:none;cursor:grab;}一键复制.copy{user-select:all;}16. 使用caret-color修改输入框光标颜色input, textarea{caret-color:red;}隐藏光标.preview{caret-color:transparent;}17.letter-spacing和word-spacing有什么区别英文单词之间p{word-spacing:.25rem;}字符之间.title{letter-spacing:.08em;}其中letter-spacing控制字符距离word-spacing控制单词距离主要针对英文总结上面的这些技巧大多数都只有一两行 CSS却能解决很多项目中的真实问题。相比记住所有 CSS 属性更重要的是知道遇到按钮不好点想到伪元素扩大热区遇到父元素状态联动想到:has()遇到 SVG 配色想到currentColor遇到透明图片阴影想到drop-shadow()遇到锚点偏移想到scroll-margin-top遇到图片裁剪想到object-fit遇到响应式尺寸想到clamp()当这些技巧真正进入你的「CSS 工具箱」以后遇到类似需求时就不需要第一时间想到 JavaScript 或各种 Hack而是优先尝试 CSS 提供的原生能力。