U

UI 开发人员的 10 个 CSS 技巧

2025-05-25

UI 开发人员的 10 个 CSS 技巧

简介：提升你的 CSS 水平

嗨，UI 开发者们！准备好提升你的 CSS 技能了吗？无论你是经验丰富的专业人士还是刚刚入门，我们都经历过样式表突然变得“不听使唤”的时刻。不过别担心！我有一些巧妙的 CSS 技巧，一定能让你的工作更轻松，设计更令人印象深刻。

在这篇博文中，我们将探索 10 个超棒的 CSS 技巧，它们将帮助你解决常见的设计难题，改进你的工作流程，并为你的项目增添更多亮点。这些技巧并非老套，它们实用、强大，非常适合像我们这样想要创造惊艳 Web 体验的 UI 开发者。

所以，拿起你最喜欢的饮料，舒服地坐下，让我们进入 CSS 黑客的世界吧！

1. CSS变量的魔力

什么是 CSS 变量？

我们列出的 CSS 技巧中，首先要介绍的是 CSS 变量（也称为 CSS 自定义属性）的使用。如果你还没开始使用它们，那你可要好好学习一下了！

CSS 变量允许您存储特定值并在整个样式表中重复使用它们。当您处理颜色、字体或任何经常重复使用的值时，此功能尤其有用。

如何使用 CSS 变量

以下是如何设置和使用 CSS 变量的简单示例：

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

.button {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

.header {
  color: var(--secondary-color);
}
Enter fullscreen mode Exit fullscreen mode

优势

  • 易于更新：在一个地方更改值，它会在所有地方更新。
  • 提高可读性：使您的 CSS 更具语义且更易于理解。
  • 支持主题：非常适合创建明暗模式或多种配色方案。

2. ::before 和 ::after 伪元素的威力

理解伪元素

接下来，我们的 CSS hacks 库中介绍的是伪元素。这些小::before工具::after允许你向元素添加内容，而无需添加额外的 HTML 标记。

实际用途

您可以使用这些伪元素实现各种酷炫的效果：

  • 添加装饰元素
  • 创建类似工具提示的信息气泡
  • 动态生成内容
  • 创建复杂的布局

示例：创建引用块

这是一个关于如何使用::before和::after创建时尚的引用块的简单示例：

blockquote {
  position: relative;
  padding: 20px;
  background: #f9f9f9;
}

blockquote::before,
blockquote::after {
  content: '"';
  font-size: 50px;
  position: absolute;
  color: #ccc;
}

blockquote::before {
  top: 0;
  left: 10px;
}

blockquote::after {
  bottom: -20px;
  right: 10px;
}
Enter fullscreen mode Exit fullscreen mode

3. Flexbox：你的布局最佳朋友

Flexbox 的灵活性

Flexbox 并非纯粹的 hack，但它功能强大，值得列入这份榜单。如果你还没用过 Flexbox，那你就错过了 CSS 中最灵活、最高效的布局方式之一。

关键 Flexbox 属性

  • display: flex;- 将元素变成弹性容器
  • flex-direction- 控制弹性项目的方向
  • justify-content- 沿主轴对齐项目
  • align-items- 沿横轴对齐项目

简单的 Flexbox 布局

以下是如何使用 Flexbox 创建响应式布局的简单示例：

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 calc(33.333% - 20px);
  margin: 10px;
}

@media (max-width: 768px) {
  .item {
    flex: 0 1 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .item {
    flex: 0 1 100%;
  }
}
Enter fullscreen mode Exit fullscreen mode

这会创建一个灵活的网格，随着屏幕尺寸的减小，它会从三列调整为两列，然后调整为一列。

4. CSS 网格革命

网格与弹性框

Flexbox 非常适合一维布局，而 CSS Grid 则通过二维布局将其提升到了一个新的高度。它非常适合轻松创建复杂的页面结构。

基本网格设置

设置简单网格的方法如下：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

高级网格技术

通过使用命名网格区域，您可以真正发挥网格的创造力：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Enter fullscreen mode Exit fullscreen mode

这将创建一个包含页眉、侧边栏、主要内容区域和页脚的布局，所有这些只需几行 CSS！

5. 掌握 CSS 过渡

流畅的过渡

CSS 过渡允许您在给定的时间内平滑地更改属性值。这是一种无需 JavaScript 即可为 UI 元素添加精细动画的好方法。

基本转换语法

转换的基本语法是：

.element {
  transition: property duration timing-function delay;
}
Enter fullscreen mode Exit fullscreen mode

实际示例：按钮悬停效果

让我们创建一个简单的按钮，悬停时颜色会平滑变化：

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}
Enter fullscreen mode Exit fullscreen mode

这会创建一个按钮，当您将鼠标悬停在其上时，它会平滑地改变颜色，为用户提供良好的视觉反馈。

6. CSS形状的魔力

打破常规

CSS 形状允许您创建非矩形布局，这可以为您的设计添加独特而有趣的外观。

使用 shape-outside

该shape-outside属性定义了内联内容应环绕的形状。以下是示例：

.circle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: #3498db;
}
Enter fullscreen mode Exit fullscreen mode

这会创建一个文本环绕的圆形，从而形成视觉上有趣的布局。

将形状与图像组合

您还可以使用shape-outside图像来创建更复杂的形状：

.image-shape {
  float: left;
  shape-outside: url('path-to-your-image.png');
}
Enter fullscreen mode Exit fullscreen mode

这使得文本能够沿着图像的轮廓流动，从而实现文本和视觉效果的无缝集成。

7. CSS计数器的力量

使用 CSS 自动编号

CSS 计数器就像 CSS 维护的变量，其值可以通过 CSS 规则递增。它们非常适合创建编号列表或段落，无需额外的标记。

设置计数器

设置和使用计数器的方法如下：

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
Enter fullscreen mode Exit fullscreen mode

这将自动h2使用“第 1 部分：”、“第 2 部分：”等对您的元素进行编号。

嵌套计数器

您甚至可以为子部分创建嵌套计数器：

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
Enter fullscreen mode Exit fullscreen mode

这会为您的章节和小节创建一个编号系统，如“1.1”、“1.2”、“2.1”等。

8. 使用 CSS 自定义滚动条

滚动条样式

您知道可以使用 CSS 来设置滚动条的样式吗？虽然此功能并非在所有浏览器中都有效，但在支持的浏览器中，它可以为您的设计增添一抹亮色。

Webkit 滚动条样式

以下是如何在 webkit 浏览器中设置滚动条样式的示例：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
Enter fullscreen mode Exit fullscreen mode

这将创建一个自定义滚动条，其灰色拇指在悬停时变暗。

跨浏览器滚动条样式

为了获得跨浏览器兼容的解决方案，您可以使用新的scrollbar-color和scrollbar-width属性：

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
Enter fullscreen mode Exit fullscreen mode

这会在支持这些属性的浏览器中设置一个带有灰色拇指和浅灰色轨道的细滚动条。

9. 纯 CSS 工具提示

无需 JavaScript！

工具提示是提供额外信息且不会使 UI 混乱的好方法。猜猜怎么着？你只需使用 CSS 就可以创建它们！

基本 CSS 工具提示

这是一个简单的纯 CSS 工具提示：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

要使用此功能，您需要按如下方式构建 HTML：

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
Enter fullscreen mode Exit fullscreen mode

这将创建一个工具提示，当您将鼠标悬停在文本上时该工具提示会出现，并具有平滑的淡入效果。

10. 纯 CSS 手风琴

无需 JavaScript 即可扩展内容

我们最后的 CSS hack 是一个漂亮的折叠效果，无需任何 JavaScript。它非常适合用于常见问题解答部分或任何您想要展开和折叠的内容。

仅 CSS 的手风琴

创建仅 CSS 手风琴面板的方法如下：

.accordion {
  max-width: 500px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  display: block;
  padding: 15px;
  background-color: #f4f4f4;
  color: #333;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.accordion-header::after {
  content: '+';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item input[type="checkbox"] {
  display: none;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
  max-height: 1000px;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header::after {
  content: '-';
}
Enter fullscreen mode Exit fullscreen mode

HTML 结构如下：

<div class="accordion">
  <div class="accordion-item">
    <input type="checkbox" id="item1">
    <label class="accordion-header" for="item1">Section 1</label>
    <div class="accordion-content">
      <p>Content for section 1...</p>
    </div>
  </div>
  <!-- Repeat for more accordion items -->
</div>
Enter fullscreen mode Exit fullscreen mode

这将创建一个可扩展的手风琴面板，它仅使用 CSS 工作，不需要 JavaScript！

结论：掌握 CSS Hacks

好了，各位，这就是全部！我们介绍了 10 个超棒的 CSS 技巧，它们可以真正提升你的 UI 开发水平。从 CSS 变量的灵活性到伪元素的魔力，从 Flexbox 和 Grid 这样的布局大师，到工具提示和折叠面板等纯 CSS 驱动的交互元素，这些技巧为创建引人入胜且高效的用户界面提供了丰富的可能性。

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
卓越的设计与卓越的可用性的完美结合！需要惊艳的用户界面吗？
让我们携手共创非凡！🚀
请联系我进行 UI 开发！

https://www.linkedin.com/in/niraj-narkhede-ui-developer/⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
​

文章来源：https://dev.to/nnnirajn/10-css-tricks-for-ui-developers-2l5
Devto 翻译
PREV
不再需要 Try/Catch：TypeScript 中处理错误的更好方法
NEXT
✅ 轻松编写更佳代码，7 个技巧助您进入状态 什么是心流？重复是心流的敌人 技能与挑战 重回状态 7 个步骤助您重回正轨 轻松编写更佳代码