你可能会用到的一些CSS小技巧

在日常前端开发中，我们经常会遇到一些看起来很简单，但处理起来又有点麻烦的问题：

图标太小，不容易点击
图片尺寸不统一，导致布局错乱
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 />
</Pressable>

2. 使用 `: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;
}

<button class="button">
  <svg viewBox="0 0 24 24">
    <path d="..." />
  </svg>
  收藏
</button>

鼠标悬停时，文字和 SVG 会一起变色，无需单独修改 SVG 颜色。

对于描边图标：

svg {
  stroke: currentColor;
}

4. 使用 `drop-shadow()` 给透明 PNG 添加自然阴影

很多人不知道：

box-shadow

和

filter: drop-shadow()

完全不是同一种阴影。

普通阴影：

.logo {
  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
}

透明 PNG：

.logo {
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 25%));
}

区别：

/* 根据矩形盒模型生成阴影 */
box-shadow: 0 8px 20px rgb(0 0 0 / 20%);

/* 根据图片真实轮廓生成阴影 */
filter: drop-shadow(0 8px 20px rgb(0 0 0 / 20%));

适用于：

SVG
Logo
商品抠图
透明 PNG

5. 使用 `scroll-margin-top` 避免锚点被导航栏遮挡

很多文档站都会遇到这个问题。

.header {
  position: fixed;
  top: 0;
  height: 64px;
}

点击锚点：

<a href="#install">安装方式</a>

<section id="install" class="article-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);
}

适用于：

SVG
Logo
单色图标
深色模式切换

不适用于照片或复杂渐变图片。

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 提供的原生能力。

posted @ 2026-07-29 10:19 一颗小行星- 阅读(61) 评论(0) 收藏举报

刷新页面返回顶部

你可能会用到的一些CSS小技巧

一、最值得掌握的几个 CSS 技巧

1. 增大元素的点击热区

2. 使用 :has() 根据子元素控制父元素

3. 使用 currentColor 让 SVG 自动继承文字颜色

4. 使用 drop-shadow() 给透明 PNG 添加自然阴影

5. 使用 scroll-margin-top 避免锚点被导航栏遮挡

二、图片与布局

6. 使用 object-fit 控制图片裁剪

7. 使用 aspect-ratio 保持宽高比

8. 使用 clamp() 实现响应式尺寸

9. clip-path 和 mask 有什么区别？

10. 使用 column-count 实现多栏布局