CSS函数有多香？8个无JS妙用让你告别冗余代码

1
<div class="product-img">
2
  <img
3
    src="cup.jpg"
4
    alt="复古陶瓷杯"
5
  />
6
  <div
7
    class="img-caption"
8
    data-title="复古陶瓷杯"
9
    data-desc="手工制作，容量300ml，适合泡咖啡"
10
  ></div>
11
</div>

1
.product-img {
2
  position: relative;
3
  width: 240px;
4
  height: 180px;
5
  overflow: hidden; /* 隐藏超出的caption */
6
}
7

8
.product-img img {
9
  width: 100%;
10
  height: 100%;
11
  object-fit: cover;
12
}
13

14
/* Caption容器：默认在底部隐藏 */
15
.img-caption {
16
  position: absolute;
17
  bottom: 0;
18
  left: 0;
19
  width: 100%;
20
  padding: 10px;
21
  background: rgba(0, 0, 0, 0.7); /* 半透明黑背景 */
22
  color: #fff;
23
  transform: translateY(100%); /* 初始在底部外，看不到 */
24
  transition: transform 0.3s ease; /* 滑入动画 */
25
}
26

27
/* 用attr()生成标题：字体加粗，占一行 */
28
.img-caption::before {
29
  content: attr(data-title);
30
  font-size: 16px;
31
  font-weight: bold;
32
  display: block;
33
  margin-bottom: 4px;
34
}
35

36
/* 用attr()生成描述：小字，半透明 */
37
.img-caption::after {
38
  content: attr(data-desc);
39
  font-size: 12px;
40
  opacity: 0.8;
41
}
42

43
/* hover时滑入Caption */
44
.product-img:hover .img-caption {
45
  transform: translateY(0); /* 从底部滑上来 */
46
}

1
<ul class="steps">
2
  <li
3
    class="step"
4
    data-status="completed"
5
  >
6
    填写信息
7
  </li>
8
  <li
9
    class="step"
10
    data-status="current"
11
  >
12
    验证手机
13
  </li>
14
  <li class="step">完成注册</li>
15
</ul>

1
.steps {
2
  counter-reset: step; /* 初始化计数器，名字叫step */
3
  list-style: none; /* 去掉默认的列表点 */
4
  padding: 0;
5
}
6

7
.step {
8
  position: relative;
9
  padding-left: 30px; /* 给序号留位置 */
10
  margin-bottom: 16px;
11
  font-size: 14px;
12
}
13

14
/* 用::before生成步骤序号 */
15
.step::before {
16
  content: counter(step); /* 显示计数器的值 */
17
  counter-increment: step; /* 每一个step，计数器加1 */
18
  position: absolute;
19
  left: 0;
20
  top: 0;
21
  width: 20px;
22
  height: 20px;
23
  line-height: 20px;
24
  text-align: center;
25
  background: #409eff;
26
  color: #fff;
27
  border-radius: 50%; /* 圆形序号 */
28
}
29

30
/* 已完成的步骤：绿色背景+对勾 */
31
.step[data-status='completed']::before {
32
  background: #67c23a;
33
  content: '✓'; /* 把序号换成对勾 */
34
}
35

36
/* 当前步骤：黄色背景+加粗 */
37
.step[data-status='current']::before {
38
  background: #e6a23c;
39
  font-weight: bold;
40
}

1
body {
2
  background: url('bg.jpg') center/cover no-repeat;
3
  min-height: 100vh;
4
  display: flex;
5
  align-items: center;
6
  justify-content: center;
7
}

1
.glass-card {
2
  padding: 24px;
3
  background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
4
  border-radius: 12px;
5
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); /* 加阴影增强层次感 */
6
  backdrop-filter: blur(10px); /* 核心！背景模糊10px */
7
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
8
}

1
/* 旧浏览器降级：用伪元素模糊背景 */
2
.glass-card::before {
3
  content: '';
4
  position: absolute;
5
  top: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  background: inherit; /* 继承卡片的背景色 */
10
  filter: blur(10px); /* 模糊背景 */
11
  z-index: -1; /* 把模糊层放在内容下面，不影响文字 */
12
}

1
<canvas
2
  id="bg-canvas"
3
  width="400"
4
  height="300"
5
></canvas>
6
<div class="canvas-bg">我用Canvas做背景！</div>

1
const canvas = document.getElementById('bg-canvas')
2
const ctx = canvas.getContext('2d')
3
let angle = 0
4

5
function animate() {
6
  ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空画布
7
  ctx.save() // 保存当前状态
8
  ctx.translate(200, 150) // 把原点移到画布中心
9
  ctx.rotate(angle) // 旋转角度
10
  ctx.fillStyle = '#409eff' // 填充色
11
  ctx.fillRect(-50, -50, 100, 100) // 画正方形（中心在原点）
12
  ctx.restore() // 恢复状态
13
  angle += 0.01 // 角度递增
14
  requestAnimationFrame(animate) // 循环动画
15
}
16

17
animate()

1
.canvas-bg {
2
  width: 400px;
3
  height: 300px;
4
  background: -moz-element(#bg-canvas) center/cover; /* 把Canvas当背景 */
5
  color: #fff;
6
  text-align: center;
7
  line-height: 300px;
8
  font-size: 20px;
9
}

1
<div class="image-grid">
2
  <img
3
    src="img1.jpg"
4
    alt="图1"
5
  />
6
  <img
7
    src="img2.jpg"
8
    alt="图2"
9
  />
10
  <img
11
    src="img3.jpg"
12
    alt="图3"
13
  />
14
  <img
15
    src="img4.jpg"
16
    alt="图4"
17
  />
18
  <img
19
    src="img5.jpg"
20
    alt="图5"
21
  />
22
  <img
23
    src="img6.jpg"
24
    alt="图6"
25
  />
26
</div>

1
.image-grid {
2
  display: flex;
3
  flex-wrap: wrap;
4
  gap: 20px; /* 用gap设置间距，比margin更方便 */
5
}
6

7
.image-grid img {
8
  width: calc((100% - 20px * 2) / 3); /* 每行3张，间距20px */
9
  height: 200px;
10
  object-fit: cover; /* 图片填充容器，保持比例 */
11
}
12

13
/* 小屏幕（<=768px）：每行2张 */
14
@media (max-width: 768px) {
15
  .image-grid img {
16
    width: calc((100% - 20px * 1) / 2); /* 每行2张，间隙数1 */
17
  }
18
}

1
<template>
2
  <div class="product-card">
3
    <img
4
      src="cup.jpg"
5
      alt="复古陶瓷杯"
6
      class="card-img"
7
    />
8
    <div class="card-info">
9
      <h4 class="card-title">复古陶瓷杯</h4>
10
      <p class="card-price">¥29.9</p>
11
    </div>
12
  </div>
13
</template>

1
.page-title {
2
  font-size: clamp(18px, 4vw, 32px); /* 最小18px，最大32px，中间按4vw自适应 */
3
}

1
.card-container {
2
  width: clamp(300px, 80%, 600px); /* 最小300px，最大600px，中间占父容器80% */
3
  margin: 0 auto; /* 水平居中 */
4
}

1
@supports not (font-size: clamp(18px, 4vw, 32px)) {
2
  .page-title {
3
    font-size: 18px; /* 旧浏览器用固定值 */
4
    @media (min-width: 800px) {
5
      font-size: 32px; /* 大屏幕用32px */
6
    }
7
  }
8
}