10 个提升开发效率的实用 CSS 技巧本文将介绍十个 CSS 技巧，帮助你充分发挥 CSS 的潜力，高效地构建现代 W

本文将介绍十个 CSS 技巧，帮助你充分发挥 CSS 的潜力，高效地构建现代 Web 界面，而无需使用 JavaScript、SVG、HTML Canvas 或集成重量级的第三方 UI 工具包和库。练习这些技巧，扩展你的 CSS 技能吧！

1. 最简单的元素居中方法

正确放置 UI 元素是设计高质量界面的必要条件。在大多数情况下，Web 开发人员需要垂直和水平居中子元素。由于不同的布局系统和定位功能，CSS 无法提供一个单独的属性来居中任何元素。在响应式设计流行之前，Web 开发人员使用负边距技巧来居中 HTML 元素。现在，你会发现许多方法可以使用各种现代和旧的 CSS 属性来居中元素，但是最简单的元素居中方法是什么呢？

现代 CSS 网格功能支持使用 place-items 简写属性来居中网格块，因此我们可以用它来居中子元素，如下所示：

<div>
  <button>一个居中的按钮</button>
</div>

<style> div {
    height: 100vh;
    display: grid;
    place-items: center;
  } </style>

2. 使用 CSS 边框创建三角形

内置的 SVG 实现通常提供全面的方法来生成任何高级的自定义形状。因此，标准的 HTML 实现没有提供内置标签来从标准 DOM 元素中创建任意形状，但是我们可以使用标准的 CSS 属性将 div 元素转换为各种几何形状，例如使用 border-radius 创建一个圆圈。

默认 div 元素中边框渲染的行为在流行的浏览器中是相同的，它允许我们如下创建三角形：

<div></div>

<style> div {
    border-right: 20px solid transparent;
    border-bottom: 20px solid darkcyan;
    border-left: 20px solid transparent;
  } </style>

你可以通过为不同的边框侧使用可见颜色并更改边框厚度来创建各种三角形。

3. 纯 CSS 倒计时

过去的 Web 开发人员通常使用 JavaScript 在网页上创建简单的倒计时器。CSS 动画功能帮助 Web 开发人员动态更新 DOM 元素的视觉效果，而无需编写 JavaScript 代码。因此，现在我们可以使用标准的 CSS 动画创建方法通过定义多个关键帧来创建倒计时。

我们可以使用 @property 规则、CSS 变量和 CSS 计数器在很短的时间内使用纯 CSS 创建一个灵活的、可定制的倒计时，而无需自己创建那么多关键帧：

<div></div>
<style> @property --c {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  
  @keyframes timer {
    from { --c: 10 }
    to   { --c: 0 }
  }
  
  :root { animation: timer 5s linear }

  div::after {
    counter-reset: c var(--c);
    content: counter(c, decimal-leading-zero);
  } </style>

上面的 CSS 代码片段使用 @property 规则、一个变量和一个计数器以及 CSS 动画功能来创建一个计时器。即使它没有使用那么多动画关键帧定义，它仍然使用 counter-reset 属性为每个动画帧渲染一个动态值：

你可以通过使用 calc() 和 mod() CSS 数学函数来调整全局计时器变量的结束值，来创建显示分钟、秒和毫秒的倒计时器。

4. 无需使用 JavaScript 的自定义原生表单控件

浏览器将 DOM 元素渲染为浏览器视窗边界内的视觉 UI 元素。但是，HTML 表单元素通常会打开在标准 DOM 视窗之外渲染的原生 UI 元素，因此没有跨浏览器解决方案来定制特定于平台的、特定于浏览器的原生表单元素的弹出元素。例如，我们无法定制 HTML 选择元素的下拉弹出窗口，但我们可以使用 CSS 来定制所有浏览器中选择框的初始视图，因为初始表单控件视图是在 DOM 中渲染的：

<div>
  <select>
    <option>React</option>
    <option>Angular</option>
    <option>Svelte</option>
    <option>Vue</option>
    <option>Lit</option>
  </select>
</div>

<style> div {
    position: relative;
    min-width: 200px;
  }
  
  select {
    appearance: none;
    padding: 6px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%;
    border: 2px solid #ccc; 
    outline: none;
  }

  select:focus { border: 2px solid #aaa; }

  div::after {
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    border-left: 6px solid transparent;
    position: absolute;
    top: 42%;
    right: 12px;
    content: "";
    pointer-events: none;
  } </style>

上面的 CSS 定义通过添加一个自定义图标和边框来定制浏览器特定的 HTML 选择元素初始视图的外观，如下面的预览所示：

使用相同的技术，你可以覆盖用户代理样式表中的默认样式，以定制其他原生表单控件并向其中添加额外的子元素，而无需使用 JavaScript 嵌入元素。

5. 使用渐变填充创建精美的盒子角

众所周知的 border-radius CSS 属性帮助我们为矩形 DOM 元素创建圆角或椭圆形边缘。此外，使用 clip-path 属性，我们可以创建美丽的精美角。你知道我们可以使用渐变填充创建创意的精美角吗？

可以通过为元素填充径向渐变背景来创建一个完美的、锐利的圆圈。如果我们使生成的圆圈透明，将其用作蒙版，然后移动到角上，它会切断所有四个角，创建一个类似照片框架的角：

<div></div>

<style> div {
    width: 200px;
    height: 100px;
    background: darkcyan;
    mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px;
  } </style>

6. 在属性选择器中使用模式匹配

Web 开发人员通常使用类和标识符来为语义化的 HTML 元素应用样式。CSS 标准还支持具有模式匹配的属性选择器，因此我们可以使用它们为元素编写全局样式。一个简单的例子是编写以下选择器来为所有原生文本输入添加全局样式：

input[type="text"] {
   /* ... */
}

属性选择器适用于任何标准 HTML 属性和自定义属性，例如数据属性。属性选择器语法还支持模式匹配，因此我们可以使用此技术来编写速记选择器，为无法编辑的 HTML 文档（例如，为第三方 HTML 文档或 CMS 页面模板设置样式）编写通用样式：

<div>
  <button class="ok-btn">确定</button>
  <button class="re-try-btn">重试</button>
  <button class="cancel-btn">取消</button>
</div>

<style> button[class$="-btn"] {
    min-width: 6em;
  } </style>

上面的选择器为所有类名以 -btn 结尾的按钮元素添加样式。

下面是另一个例子，它使用属性模式匹配为维基百科超链接添加不同的样式：

a[href*=".wikipedia.org"] {
  color: darkcyan;
}

7. 创建自定义列表样式类型

HTML 标准提供了 <ol> 和 <ul> 语义标签来在网页上创建列表。这些标签带有默认的列表样式，但是你可以使用 list-style-type 属性覆盖这些默认列表样式。例如，以下 CSS 定义激活了小写罗马数字编号系统：

ol {
  list-style-type: lower-roman;
}

@counter-style 规则允许你通过使用预先包含的列表样式或从头创建新样式来为 list-style-type 属性创建自定义样式定义。以下 HTML 文档使用自定义列表样式，该样式使用一个表情符号创建：

<div>
  <ul>
    <li>React</li>
    <li>Angular</li>
    <li>Svelte</li>
    <li>Vue</li>
    <li>Lit</li>
  </ul>
</div>

<style> @counter-style emojis {
    system: cyclic;
    symbols: "\1F449\1F3FD";
    suffix: " ";
  }
  
  ul { list-style-type: emojis } </style>

例如，以下样式定义将在每个有序列表项目之前用连字符 - 在数字周围渲染方括号：

@counter-style custom-roman {
    system: extends lower-roman;
    prefix: "[";
    suffix: "] - ";
  }
  
  ol { list-style-type: custom-roman }

8. 为英雄区域创建艺术背景

现代网站设计包含一个大型的介绍区域，称为英雄区域，它介绍了网站并放置了几个主要的操作按钮。Web 开发人员通常使用创意背景图片来创建这些英雄区域。现在，由于内置的 CSS 滤镜和混合模式，我们不再需要编辑原始源图片来为英雄区域创建创意背景图片。

我们可以通过使用 ::after 伪元素将各种滤镜应用于其背景图片来创建一个英雄区域，如下所示：

<div>
  <h1>英雄区域</h1>
</div>

<style> div {
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
    overflow: auto;
  }

  div::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(4px) brightness(0.65) sepia(90%);
  } </style>

同时，mix-blend-mode 属性帮助我们通过根据背景颜色为背景图片添加颜色混合效果来创建创意英雄区域，如下面的示例所示：

div {
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    isolation: isolate;
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
  }

  div::after {
    content: "";
    position: absolute;
    background: #594100;
    inset: 0;
    z-index: -1;
    mix-blend-mode: multiply;
  }

你也可以使用 backdrop-filter CSS 属性创建艺术英雄区域，但它尚未在所有流行的标准浏览器中实现。

9. 使用 CSS 添加用户友好、美观的滚动行为

你还记得过去 jQuery 时代吗？我们使用 .scrollTo() 函数来使用 JavaScript/jQuery 实现平滑滚动动画。现在，Web 开发人员可以使用纯 CSS 更改滚动行为并激活平滑滚动！

看看以下激活平滑滚动的 CSS 定义：

<a href="#target1">[1]</a>
<a href="#target2">[2]</a>

<div id="target1"></div>
<div id="target2"></div>

<style> div {
    height: 100vh;
    border-bottom: solid 40px #aaa;
    background-color: #ccc;
  }

  :root { scroll-behavior: smooth } </style>

使用此 CSS 定义，即使是后退按钮，浏览器也会激活平滑滚动，如下面的预览所示：

CSS 滚动捕捉模块提供了一组 CSS 属性来改善可滚动容器的可用性和可访问性。例如，以下代码片段会自动在主要部分停止滚动，并避免在部分区域停止：

<section style="background: #ccc">1</section>
<section style="background: #aaa">2</section>
<section style="background: #ccc">3</section>
<section style="background: #aaa">4</section>

<style> section {
    height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    font-size: 7em;
  }
  
  :root {
    background-color: #eee;
    scroll-snap-type: y mandatory;
  } </style>

CSS 滚动捕捉功能帮助我们在移动应用程序中为支持滑动的手势的界面实现无 JavaScript 的、最小的纯 CSS 解决方案。从 官方 MDN 文档 中阅读更多关于滚动捕捉模块的信息。

10. 无类 CSS 样式技术

每个 Web 开发人员都有使用类来开始设置样式的做法。使用组织良好的类无疑是创建简洁、可管理的网页的最佳实践。但是，创建类并不是创建最小网页的必要条件。无类 Web 设计理念鼓励我们使用语义化的 HTML 标签来编写 CSS：

nav {}
ul {}
ul li {}
summary {}

功能选择器（实现为伪类）如 :not()、:has() 和 :is() 帮助我们通过避免无类样式表中选择器中的重复段来编写简洁的代码。例如，以下代码片段使用 :not() 为导航菜单项添加颜色样式，但最后一个除外：

<nav>
  <ul>
    <li>首页</li>
    <li>服务</li>
    <li>关于我们</li>
    <li>联系我们</li>
  </ul>
</nav>

<style> nav ul {
    display: flex;
    list-style: none;
    gap: 1em;
    background: #eee;
    padding: 1em;

    :not(li:last-child) {
      color: darkcyan;
    }
  } </style>

假设你应该为渲染 SVG 图标的菜单项添加自定义样式。然后，你可以使用 :has() 功能选择器选择这些菜单项，如下所示：

li:has(svg) {
  /* ... */
}

:has() 伪类可以与属性选择器和 CSS 变量结合使用，以实现交互式主题更改：

<div>
  <label><input type="radio" value="t1" name="t" checked>主题 1</label>
  <label><input type="radio" value="t2" name="t">主题 2</label>
</div>

<style> body { 
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.5s;
  }
  
  :root:has(input[value="t1"]:checked) {
    --background-color: darkcyan;
    --text-color: white;
  } 

  :root:has(input[value="t2"]:checked) {
    --background-color: skyblue;
    --text-color: black;
  } </style>

:is() 功能选择器帮助我们为逗号分隔的、长的选择器编写替代的速记选择器：

/* 老式 */
section h1, 
section h2, 
section h3, 
section h4, 
section h5, 
section h6 {
  color: darkcyan;
}

/* 现代 */
section :is(h1, h2, h3, h4, h5, h6) {
  color: darkcyan;
}

总结

本文介绍了 10 个实用的 CSS 技巧，帮助开发者在不使用 JavaScript 的情况下，高效地创建现代、功能丰富的网站。从元素的简单操作到艺术背景的打造，每个技巧都展现了 CSS 的强大功能，值得开发者学习和应用。

最后，如果本文的内容对你有启发，帮我点个赞，关注一波，分享出去，也许你的转发能给别人带来一点帮助。