前端三剑客
CSS

CSS 实战技巧

# CSS 实战技巧

# 1. 垂直水平居中大法

在以前，垂直和水平居中元素通常需要一些复杂的技巧，例如使用绝对定位和负边距。不过，现在有了 Flexbox，我们可以轻松实现这一目标。

.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中对齐内容 */
  align-items: center; /* 垂直居中对齐内容 */
  height: 100vh; /* 让容器高度占满整个视窗 */
}

1
2
3
4
5
6

拓展使用：

单行文字的垂直居中：可以直接对父元素应用 align-items: center;，而不需要指定 height。
多行文字的垂直居中：可以使用 align-items: center; 配合 flex-direction: column; 来实现。

# 2. 文字大小随视窗变化

通过 vw（视窗宽度的百分比）单位，可以让文字大小随着屏幕宽度的变化而变化，从而实现响应式的排版效果。

h1 {
  font-size: 5vw; /* 字体大小是视窗宽度的 5% */
}

1
2
3

拓展使用：

结合 clamp() 函数：为了避免文字过大或过小，可以使用 clamp(min, preferred, max) 函数，确保字体大小在一定范围内变化。
```
h1 {
  font-size: clamp(16px, 5vw, 32px); /* 最小16px，最大32px，首选值是 5vw */
}
```
1
2
3
适应各种设备：这种方法对于需要在移动设备上保持良好阅读体验的网页非常有用。

# 3. 保持元素的比例

为了让图片、视频或其他元素保持固定的比例，可以使用 padding-top 技巧。这个技巧基于元素的宽度来设置高度，从而保证宽高比不变。

.aspect-ratio-box {
  width: 100%; /* 宽度占满容器 */
  padding-top: 56.25%; /* 高度为宽度的 56.25%，即 16:9 比例 */
  position: relative; /* 使内部元素可以绝对定位 */
}

.aspect-ratio-content {
  position: absolute; /* 绝对定位，填充父元素 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

拓展使用：

适用于任何比例：只需调整 padding-top 的值，例如 75% 对应 4:3 的比例。
适应不同内容：这种方法不仅适用于视频，还适用于图像、地图、广告牌等需要保持比例的元素。

# 4. 自定义复选框和单选按钮

默认的复选框和单选按钮通常看起来很单调，可以通过隐藏原生控件并使用 CSS 来定制这些元素的外观。

.custom-checkbox input {
  display: none; /* 隐藏原生复选框 */
}

.custom-checkbox .checkmark {
  width: 20px; /* 定义复选框的宽度 */
  height: 20px; /* 定义复选框的高度 */
  background-color: #eee; /* 默认背景颜色 */
  border-radius: 4px; /* 圆角边框 */
}

.custom-checkbox input:checked + .checkmark {
  background-color: #2196F3; /* 选中状态下的背景颜色 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

拓展使用：

添加动画：可以在 .checkmark 上添加 transition，让背景颜色的变化更加平滑。
```
.custom-checkbox .checkmark {
  transition: background-color 0.3s ease;
}
```
1
2
3
多状态样式：可以根据不同的状态（例如 hover、focus）定制不同的样式，使控件更加美观和易用。

# 5. 用 CSS Grid 打造复杂布局

CSS Grid 是一个强大的布局工具，可以帮助我们创建各种复杂的页面布局，而不需要嵌套多层的元素。

.container {
  display: grid; /* 启用 Grid 布局 */
  grid-template-columns: repeat(3, 1fr); /* 创建 3 列等宽的布局 */
  gap: 10px; /* 设置网格项之间的间距 */
}

.item {
  background-color: lightblue; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
}

1
2
3
4
5
6
7
8
9
10

拓展使用：

更复杂的网格布局：使用 grid-template-areas 可以为网格布局命名，并在复杂布局中灵活使用。

.container {
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

1
2
3
4
5
6

自动布局：可以使用 auto-fill 或 auto-fit 配合 minmax() 来创建响应式布局，自动适应容器大小。

# 6. 实现粘性页脚

通过 Flexbox 布局可以轻松实现粘性页脚，使得页脚始终固定在页面底部，无论内容高度如何变化。

body {
  display: flex; /* 启用 Flexbox 布局 */
  flex-direction: column; /* 元素按列方向排列 */
  min-height: 100vh; /* 页面最小高度为视窗高度 */
}

main {
  flex: 1; /* 主内容区域占据剩余空间 */
}

footer {
  background-color: #f1f1f1; /* 设置页脚背景颜色 */
  padding: 10px; /* 设置内边距 */
  text-align: center; /* 文字居中对齐 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

拓展使用：

响应式设计：可以在不同屏幕尺寸下调整页脚的样式，使其在所有设备上都能良好显示。
附加功能：粘性页脚可以和其他 UI 元素（如侧边栏、弹出菜单等）结合使用，提供更好的用户体验。

# 7. 平滑滚动链接

为了提升用户体验，可以为整个页面添加平滑滚动效果。当用户点击页面内的锚链接时，页面会以平滑的方式滚动到目标位置，而不是瞬间跳转。

html {
  scroll-behavior: smooth; /* 启用平滑滚动效果 */
}

1
2
3

拓展使用：

可以在特定的容器内启用平滑滚动，只需在该容器的 CSS 中添加 scroll-behavior: smooth;。
使用 element.scrollIntoView({ behavior: 'smooth' }); 在点击按钮或触发事件时实现平滑滚动。

# 8. 让图片自适应大小

为了确保图片在不同设备上都能很好地显示，可以使用 max-width 和 height: auto。这样，无论屏幕宽度如何变化，图片都会按比例缩放。

img {
  max-width: 100%; /* 图片宽度不会超过其父容器 */
  height: auto; /* 图片高度按比例自动调整 */
}

1
2
3
4

拓展使用：

使用 background-size: contain; 或 background-size: cover; 可以让背景图片适应容器。
结合媒体查询，为不同屏幕尺寸设置不同的图片大小，确保最佳显示效果。

# 9. 用省略号截断文本

当文本内容超出容器宽度时，使用省略号代替溢出的文本，以避免内容溢出导致布局混乱。适用于单行文本的截断。

.truncate {
  white-space: nowrap; /* 强制文本在一行显示 */
  overflow: hidden; /* 超出容器的部分被隐藏 */
  text-overflow: ellipsis; /* 用省略号代替被隐藏的文本 */
  width: 200px; /* 容器宽度，可根据需求调整 */
}

1
2
3
4
5
6

拓展使用：

使用 line-clamp 属性来截断多行文本，并显示省略号（需配合 webkit 前缀）。

.truncate-multiple {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

1
2
3
4
5
6

# 10. 自定义滚动条

为了让页面更具个性化，可以通过 CSS 来定制滚动条的样式。这项功能目前主要在 Webkit 内核的浏览器（如 Chrome、Safari）中生效。

::-webkit-scrollbar {
  width: 10px; /* 滚动条的宽度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景色 */
}

::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条的滑块颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滚动条滑块的颜色 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

拓展使用：

如果您的页面有水平滚动条，也可以应用类似的样式。
通过 active 或 focus 伪类定制滚动条在不同状态下的样式。

# 11. 全屏背景图片

为了在页面上展示更具视觉冲击力的背景图片，可以让图片充满整个视窗，并确保其在不同屏幕尺寸上都能很好地显示。

.full-screen-bg {
  background-image: url('background.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景图片按比例填充整个容器 */
  background-position: center; /* 图片居中对齐 */
  height: 100vh; /* 高度设置为视窗高度 */
}

1
2
3
4
5
6

拓展使用：

使用 background-attachment: fixed; 可以让背景图片在页面滚动时保持不动。
可以设置多个背景图片叠加，使用逗号分隔各个背景图片。

# 12. 动画渐变背景

通过 @keyframes 和 background-position 的结合，可以创建一个渐变背景，并使其随着时间不断变化。这样的效果可以让页面更加生动和吸引人。

@keyframes gradient {
  0% { background-position: 0% 50%; } /* 初始状态下背景位置 */
  50% { background-position: 100% 50%; } /* 中间状态下背景位置 */
  100% { background-position: 0% 50%; } /* 最终状态下背景位置回到初始 */
}

.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b); /* 定义渐变颜色 */
  background-size: 400% 400%; /* 定义背景的大小，用于平滑动画效果 */
  animation: gradient 15s ease infinite; /* 定义动画效果：15秒周期、平滑、无限循环 */
}

1
2
3
4
5
6
7
8
9
10
11

拓展使用：

调整 linear-gradient 的角度值，创建从不同方向过渡的渐变效果。
结合多个 @keyframes 动画，创建更复杂的背景动画效果，例如颜色循环、光线闪烁等。

# 13. 添加图片覆盖层

通过为图片添加遮罩层，可以在图片上叠加颜色或图案，从而营造出更加丰富的视觉效果。这种效果通常用于显示文本或其他内容在图片之上。

.image-overlay {
  position: relative; /* 父元素需要相对定位，以便覆盖层能绝对定位 */
}

.image-overlay::after {
  content: ''; /* 生成一个空的伪元素 */
  position: absolute; /* 伪元素绝对定位，覆盖整个父元素 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖层宽度为父元素宽度 */
  height: 100%; /* 覆盖层高度为父元素高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置半透明的黑色遮罩层 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13

拓展使用：

覆盖层上可以添加文字，利用 z-index 将文字置于遮罩层上方，确保可见性。
可以根据不同的状态（如 hover）调整覆盖层的透明度或颜色，实现交互效果。

# 14. 图片悬停效果

通过 CSS 的 transform 和 transition 属性，可以为图片添加悬停放大的效果，使页面更加生动。这种效果可以用于增强用户与图片的交互体验。

.image-hover img {
  transition: transform 0.3s; /* 定义放大效果的过渡时间 */
}

.image-hover img:hover {
  transform: scale(1.1); /* 当鼠标悬停时，将图片放大 1.1 倍 */
}

1
2
3
4
5
6
7

拓展使用：

可以结合 box-shadow 在悬停时为图片添加阴影效果，增加立体感。
调整 transform 的其他属性如 rotate，为图片添加旋转效果。

# 15. 使用 CSS 变量简化主题切换

使用 CSS 变量（自定义属性）可以方便地实现主题的切换，只需修改变量值，就可以轻松调整整个网站的配色方案。

:root {
  --primary-color: #3498db; /* 定义主色调变量 */
  --secondary-color: #2ecc71; /* 定义次要色调变量 */
}

button {
  background-color: var(--primary-color); /* 使用主色调作为背景色 */
  color: var(--secondary-color); /* 使用次要色调作为文字颜色 */
}

1
2
3
4
5
6
7
8
9

拓展使用：

通过 JavaScript 动态修改 CSS 变量的值，实时切换主题，例如根据用户的选择或系统的配色方案自动调整。
可以定义更多的变量，如 --font-size-base 或 --border-radius，进一步控制全局样式。

# 16. object-fit 控制图片显示方式

object-fit 属性允许我们在指定元素的宽高时，控制图片或视频内容如何填充容器，从而避免图片变形或裁剪不当。

.fit-image {
  width: 100%; /* 图片宽度占满父容器 */
  height: 200px; /* 固定高度 */
  object-fit: cover; /* 图片按比例填满容器，可能部分裁剪 */
}

1
2
3
4
5

拓展使用：

object-fit: contain; 可以确保整个图片显示在容器内，且不会被裁剪。
object-position 可以进一步控制图片在容器内的对齐方式，例如居中显示或偏移。

# 17. 防止文本换行

在某些场景下，我们希望文本在一行内显示，而不会自动换行。white-space: nowrap; 可以确保文本不会在其容器内换行。

.no-break {
  white-space: nowrap; /* 强制文本在一行内显示 */
}

1
2
3

拓展使用：

结合 overflow: hidden; 和 text-overflow: ellipsis; 可以在容器宽度不足时用省略号代替溢出的文本，确保布局整齐。
在按钮、导航栏等需要固定宽度的元素中常用，避免文本超出容器边界。

# 18. 让元素撑满父元素宽度

在某些布局中，我们希望元素能够完全填充父元素的宽度，甚至可以超出父元素的边界。通过计算视窗宽度和父元素的差值，可以实现这一效果。

.full-width {
  width: 100vw; /* 元素宽度等于视窗宽度 */
  margin-left: calc(50% - 50vw); /* 向左偏移一半视窗宽度，达到左右撑满效果 */
  margin-right: calc(50% - 50vw); /* 同时调整右边距 */
}

1
2
3
4
5

拓展使用：

在全屏横幅或背景图中使用，确保内容在各种屏幕尺寸下都能完全展示。
结合 padding 和 box-sizing: border-box;，可以确保内部元素的内边距不会影响其撑满父元素的效果。

# 19. 使用 CSS 控制 SVG 图标颜色

通过使用 currentColor 关键字，可以让 SVG 图标继承父元素的文本颜色，从而轻松控制图标的颜色而无需修改 SVG 文件本身。

.icon {
  fill: currentColor; /* 使用父元素的文本颜色填充 SVG */
}

.icon-container {
  color: #ff6347; /* 设置父元素的颜色，SVG 图标将继承该颜色 */
}

1
2
3
4
5
6
7

拓展使用：

通过在不同状态（如 hover 或 active）下改变 color 值，可以实现图标颜色的动态变化。
结合 CSS 变量，进一步增强颜色的可配置性，例如根据主题调整图标颜色。

# 20. 使用命名区域的 CSS Grid

通过使用命名区域的 CSS Grid 布局，可以轻松构建复杂且灵活的网页结构。命名区域使得布局更加直观和易于维护。

.grid-container {
  display: grid; /* 启用 Grid 布局 */
  grid-template-areas: 
    'header header' /* 定义第一行的布局，包含两个 header 区域 */
    'sidebar content' /* 定义第二行的布局，包含 sidebar 和 content 区域 */
    'footer footer'; /* 定义第三行的布局，包含两个 footer 区域 */
  grid-gap: 10px; /* 设置网格项之间的间距 */
}

.header {
  grid-area: header; /* 将此元素放置在 header 区域 */
}

.sidebar {
  grid-area: sidebar; /* 将此元素放置在 sidebar 区域 */
}

.content {
  grid-area: content; /* 将此元素放置在 content 区域 */
}

.footer {
  grid-area: footer; /* 将此元素放置在 footer 区域 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

拓展使用：

可以结合 grid-template-columns 和 grid-template-rows 来进一步控制每个区域的大小比例，如定义固定的 sidebar 宽度和自适应的 content 宽度。
可以使用媒体查询来调整 grid-template-areas，在不同屏幕尺寸下改变布局结构。

# 21. CSS 过渡效果

CSS 过渡效果可以为元素的状态变化添加平滑过渡，使页面交互更加自然。过渡属性控制了从一个状态到另一个状态的变化过程。

.transition-button {
  background-color: #3498db; /* 按钮的初始背景色 */
  transition: background-color 0.3s; /* 当背景色变化时，过渡时间为 0.3 秒 */
}

.transition-button:hover {
  background-color: #2ecc71; /* 鼠标悬停时的背景色 */
}

1
2
3
4
5
6
7
8

拓展使用：

结合 transition: all 0.3s ease;，可以为元素的多个属性（如宽度、透明度、边框等）添加统一的过渡效果。
通过自定义 transition-timing-function（如 ease-in-out）调整过渡的节奏。

# 22. CSS 动画

CSS 动画可以让网页元素动起来，增加页面的互动性和趣味性。使用 @keyframes 定义动画帧序列，并将其应用到元素上。

@keyframes bounce {
  0%, 100% { transform: translateY(0); } /* 起始和结束位置不移动 */
  50% { transform: translateY(-20px); } /* 中间位置向上移动 20px */
}

.bounce {
  animation: bounce 2s infinite; /* 应用 bounce 动画，持续时间 2 秒，无限循环 */
}

1
2
3
4
5
6
7
8

拓展使用：

可以调整 animation-direction 为 alternate，使动画在前后两个方向上交替播放。
通过增加 @keyframes 的百分比段落，可以创建更加复杂的动画效果，如旋转、缩放等。

# 23. 使用 CSS 创建不规则形状

使用 clip-path 属性，可以创建不规则形状的元素，打破传统矩形的限制。clip-path 定义了一个裁剪区域，元素的内容将被裁剪成该区域的形状。

.clip-path {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 创建一个菱形区域 */
  background-color: #3498db; /* 设置背景颜色 */
  width: 200px; /* 设置元素宽度 */
  height: 200px; /* 设置元素高度 */
}

1
2
3
4
5
6

拓展使用：

clip-path 支持多种形状（如圆形、椭圆形、多边形），可以根据设计需求自由选择。
可以结合 hover 状态和 transition，让形状在交互时变形，增加趣味性。

# 24. 实现深色模式

通过使用 CSS 变量和媒体查询，可以轻松实现深色模式。当用户系统处于深色模式时，网站的配色将自动调整为深色方案，提供更好的用户体验。

:root {
  --bg-color: #fff; /* 默认背景颜色 */
  --text-color: #000; /* 默认文本颜色 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333; /* 深色模式的背景颜色 */
    --text-color: #fff; /* 深色模式的文本颜色 */
  }
}

body {
  background-color: var(--bg-color); /* 使用 CSS 变量设置背景颜色 */
  color: var(--text-color); /* 使用 CSS 变量设置文本颜色 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

拓展使用：

可以为更多的元素定义变量，如按钮颜色、边框颜色等，使整个网站主题色调统一。
使用 JavaScript 动态切换主题，允许用户在深色模式和浅色模式之间自由切换。

# 25. CSS 计数器

CSS 计数器允许我们在列表或章节中自动编号，无需手动调整编号。计数器可以重置、递增，并通过伪元素在内容前面显示。

.counter-list {
  counter-reset: section; /* 初始化或重置计数器 */
}

.counter-list li::before {
  counter-increment: section; /* 每次遇到 li 元素时计数器递增 */
  content: "Section " counter(section) ": "; /* 在每个 li 元素前插入计数器值 */
}

1
2
3
4
5
6
7
8

拓展使用：

可以为不同层级的列表使用多个计数器（例如 section 和 subsection），实现多级编号。
结合 content: attr(data-number);，可以在 HTML 中灵活地设置计数器初始值或添加自定义编号。

# 26. 设置鼠标指针样式

通过 CSS，可以为不同的元素设置不同的鼠标指针样式，常见的例如手形指针、十字准星、禁止符号等。这可以增强用户的交互体验，提示用户该元素具有某种功能（如可点击、拖拽等）。

.pointer {
  cursor: pointer; /* 鼠标悬停时显示为手形指针，常用于按钮或链接 */
}

.crosshair {
  cursor: crosshair; /* 鼠标悬停时显示为十字准星，常用于绘图或选择 */
}

.not-allowed {
  cursor: not-allowed; /* 鼠标悬停时显示为禁止符号，常用于不可点击的按钮 */
}

.default-cursor {
  cursor: default; /* 恢复默认的鼠标指针样式 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

拓展使用：

可以使用自定义的图像作为鼠标指针，cursor: url('path/to/cursor.png'), auto;，其中 auto 为备用指针类型。
结合 JavaScript，可以在不同的交互场景下动态改变鼠标指针样式，提供更丰富的用户体验。

# 27. 设置元素阴影

使用 box-shadow 和 text-shadow 可以为元素添加阴影效果，提升页面的层次感和立体感。这种效果广泛应用于按钮、卡片、弹窗等元素上。

.box-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 设置一个轻微的阴影，偏移量为 0px 水平和 4px 垂直，模糊半径为 6px */
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置文本阴影，偏移量为 2px 水平和垂直，模糊半径为 4px */
}

1
2
3
4
5
6
7

拓展使用：

可以使用 inset 值创建内阴影效果，使得阴影看起来嵌入到元素内部。
为不同状态的元素设置不同的阴影效果（如 hover 时加深阴影），让交互更加生动。

# 28. 设置元素的圆角

通过 border-radius 属性，可以为元素的边框设置圆角。这种效果广泛应用于按钮、输入框、卡片等元素，使其更具亲和力。

.rounded-button {
  border-radius: 8px; /* 为按钮的四个角设置 8px 的圆角 */
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%; /* 将元素设置为圆形，圆角半径等于元素的宽高一半 */
}

1
2
3
4
5
6
7
8
9
10

拓展使用：

使用 border-radius 的不同值可以创建多种形状，如椭圆、圆角矩形等。
结合 background-clip: padding-box; 可以控制背景色或图像是否延伸到圆角外部。

# 29. 设置透明度

通过 opacity 属性，可以为元素设置透明度。透明度范围从 0（完全透明）到 1（完全不透明），可以用于图片、文字、背景等元素。

.transparent-box {
  background-color: #3498db;
  opacity: 0.5; /* 设置元素的透明度为 50% */
}

1
2
3
4

拓展使用：

结合 hover 伪类，可以在鼠标悬停时逐渐改变元素透明度，创建淡入淡出的效果。
可以使用 rgba() 色值格式直接在颜色中指定透明度，实现背景色部分透明而文本保持不透明。

# 30. 使用 `z-index` 控制层叠顺序

z-index 属性可以控制元素的堆叠顺序，数值越大，元素越在上层。通常用于处理弹窗、悬浮菜单等元素的层叠问题。

.modal {
  position: absolute; /* 设置绝对定位以确保元素能浮动 */
  z-index: 1000; /* 设置较高的 z-index 使其浮在其他内容之上 */
}

.background {
  z-index: 10; /* 背景内容的 z-index 较低，显示在下层 */
}

1
2
3
4
5
6
7
8

拓展使用：

z-index 只有在 position 值不为 static 时才会生效（如 relative、absolute 或 fixed）。
结合 transform 和 z-index，可以创建具有深度感的3D效果。

# 31. 设置固定背景

通过 background-attachment: fixed; 可以将背景图像固定，使其在页面滚动时保持静止。这个效果常用于全屏背景图或具备视觉差效果的页面设计。

.fixed-background {
  background-image: url('background.jpg');
  background-attachment: fixed; /* 背景图像固定不动 */
  background-size: cover; /* 背景图像按比例填满容器 */
}

1
2
3
4
5

拓展使用：

在长页面中使用固定背景，可以创建视差滚动效果，提升页面的视觉冲击力。
可以结合 background-position 控制背景图像在滚动过程中的显示位置。

# 32. 设置表单元素的自定义样式

默认的表单元素（如复选框、单选按钮、下拉菜单等）样式较为基础，通过 CSS 可以对其进行自定义，使其更符合设计需求。

.custom-checkbox input[type="checkbox"] {
  display: none; /* 隐藏默认的复选框 */
}

.custom-checkbox label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
}

.custom-checkbox input[type="checkbox"]:checked + label {
  background-color: #3498db; /* 选中状态下的背景颜色 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

拓展使用：

可以为表单元素添加图标或文字描述，增强可读性。
结合 :checked 伪类，为选中和未选中状态设计不同的样式，以提升用户体验。

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS 布局对齐汇总 CSS 移动端适配→

CSS 实战技巧

# CSS 实战技巧

# 1. 垂直水平居中大法

# 2. 文字大小随视窗变化

# 3. 保持元素的比例

# 4. 自定义复选框和单选按钮

# 5. 用 CSS Grid 打造复杂布局

# 6. 实现粘性页脚

# 7. 平滑滚动链接

# 8. 让图片自适应大小

# 9. 用省略号截断文本

# 10. 自定义滚动条

# 11. 全屏背景图片

# 12. 动画渐变背景

# 13. 添加图片覆盖层

# 14. 图片悬停效果

# 15. 使用 CSS 变量简化主题切换

# 16. object-fit 控制图片显示方式

# 17. 防止文本换行

# 18. 让元素撑满父元素宽度

# 19. 使用 CSS 控制 SVG 图标颜色

# 20. 使用命名区域的 CSS Grid

# 21. CSS 过渡效果

# 22. CSS 动画

# 23. 使用 CSS 创建不规则形状

# 24. 实现深色模式

# 25. CSS 计数器

# 26. 设置鼠标指针样式

# 27. 设置元素阴影

# 28. 设置元素的圆角

# 29. 设置透明度

# 30. 使用 z-index 控制层叠顺序

# 31. 设置固定背景

# 32. 设置表单元素的自定义样式

# 30. 使用 `z-index` 控制层叠顺序